/* TruckSimMap - all site styles (merged: mapy-2024.css + map.css + site styles) */

.leaflet-container{background:#000}
.leaflet-container svg {width:unset;display:block;}


.m22-c{position:relative;margin-bottom:30px}
.m22-mapa-embed .m22-c{padding:0px}
.m22-mapa{position:relative;width:100%;height:80vh;}
.m22-mapa-embed .m22-mapa{height:60vh;height:calc(100vh - 40px)}
.m22-layer-c{position:absolute;top:10px;left:10px;bottom:10px;right:10px;pointer-events:none;}
.m22-layer{position:relative;width:100%;height:100%;}
.m22-menu{display:none;position:absolute;top:55px;left:10px;min-width:250px;max-width:300px;background:rgba(255,255,255,0.95);overflow-y:auto;overflow-wrap: break-word;max-height:calc(100% - 65px);pointer-events:auto;padding:10px}
.m22-menu-on .m22-menu{display:block}



.m22-menu-logo-grid{border-top:1px dashed #cccccc;padding-top:8px;display:block;text-decoration:none;}
.m22-menu-logo-grid2{display:inline-grid;grid-template-columns:18px auto;grid-gap:5px;align-items:center;height:20px;}
.m22-menu-logo-grid2 div{background:#cccccc;height:18px;width:18px;border-radius:18px;}
.m22-menu-logo-grid2 span{font-size:16px;line-height:20px;color:#999999;font-weight:400;border-bottom:1px dotted rgba(0,0,0,0)}
.m22-menu-logo-grid2 img{margin:3px auto}
.m22-menu-logo-grid2:hover{text-decoration:none;}
.m22-menu-logo-grid2:hover span{color:#c0432a;border-bottom:1px dotted #c0432a}
.m22-menu-logo-grid2:hover img{opacity:1;}
.m22-menu-logo-grid2:hover div{background:#c0432a}

.m22-menu-tit-t2{display:inline-grid;grid-template-columns:auto 18px;grid-gap:5px;align-items:center;text-decoration:none}
.m22-menu-tit-t2 div{background:#cccccc;height:16px;width:16px;border-radius:16px;margin-bottom:2px}
.m22-menu-tit-t2 span{border-bottom:1px dotted rgba(0,0,0,0)}
.m22-menu-tit{margin-bottom:10px;padding-top:5px}
.m22-menu-tit-t1{font-size:21px;line-height:23px;font-weight:700;color:#000000;letter-spacing:-0.3px}
.m22-menu-tit-t2{font-size:16px;line-height:22px;font-weight:400;color:#333333}
.m22-menu-tit-t2:hover{text-decoration:none}
.m22-menu-tit-t2:hover span{color:#c0432a;border-bottom:1px dotted #c0432a}
.m22-menu-tit-t2:hover div{background:#c0432a}

.m22-menu-close-c{width:22px;height:22px;float:right;margin-left:10px;margin-bottom:5px;background:#aaaaaa;border-radius:22px;}
.m22-menu-close-c:hover{background:#c0432a}
.m22-menu-close{display:block;}
.m22-menu-close:hover{opacity:1;cursor:pointer;}

/* search */

.m22-search{margin-bottom:10px;}
.m22-search-close-on .m22-search-box-c{display:grid;grid-template-columns:36px auto;grid-gap:0px;}
.m22-search-box-close{display:none}
.m22-search-close-on .m22-search-box-close{background:#cccccc;cursor:pointer;display:block;width:38px;height:38px;}
.m22-search-close-on .m22-search-box-close img{margin:7px}
.m22-search-close-on .m22-search-box-close:hover{background:#be412f}

.m22-search-box{background: #ffffff;height: 38px;width: 100%;border: 1px solid #cccccc;position: relative;}
.m22-search-txt{width: calc(100% - 36px);height: 36px;line-height: 36px;border: none;padding: 0px;margin: 0px;outline: none;position: absolute;top: 0px;left: 0px;padding-left: 10px;font-size: 16px;}
.m22-menu-search-but{width:36px;border:none;background: none;cursor: pointer;right: 0;height: 36px;position: absolute;top: 0;}
.m22-menu-search-but input{width:36px;border:none;height:36px;display:none;background: none;}
.m22-menu-search-but img{opacity:0.5}
.m22-menu-search-but:hover img{opacity:1}

.m22-search-results{margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed #cccccc;}
.m22-search-results-tit{font-size:15px;line-height:18px;margin-bottom:5px}
.m22-search-results-ul{padding-left:18px}
.m22-search-results li{font-size:15px;line-height:18px;margin-bottom:5px;}
.m22-search-results li:hover{cursor:pointer;color:#2aa1c0;text-decoration:underline}

.m22-menu-show-hide-c{text-align:center;margin-bottom:10px;color:#cccccc}
.m22-menu-show-hide-c span{color:#999999;margin:0px 5px 0px 5px;}
.m22-menu-show-hide-c span:hover{color:#c0432a;cursor:pointer;border-bottom:1px dotted #c0432a}

/* Panel selektor */
.m22-menu-pois-c{}
.m22-menu-pois-box{display:grid;grid-template-columns:32px auto 20px;grid-gap:10px;align-items: center;cursor: pointer;font-size: 16px;border-top:1px dashed #cccccc;padding:5px 5px 5px 5px}
.m22-menu-pois-desc{font-size: 18px;line-height:20px;font-weight:400;color:#000000;user-select: none;letter-spacing:-0.4px}
.m22-menu-pois-box:hover{background:#ffffff}
.m22-menu-pois-box-off .m22-menu-pois-ico{opacity:0.4}
.m22-menu-pois-box-off:hover .m22-menu-pois-ico{opacity:1}
.m22-menu-pois-box-off .m22-menu-pois-desc{color:#999999;} 
.m22-menu-pois-box-off:hover .m22-menu-pois-desc{color:#000000;} 

.m22-menu-pois-box-input {position: absolute;z-index: -1;opacity: 0;}

input.m22-menu-pois-box-input[type=checkbox]+label img{opacity:0.3;filter: grayscale(100%)}
input.m22-menu-pois-box-input[type=checkbox]:checked+label img{opacity:1;filter: grayscale(0%)}
input.m22-menu-pois-box-input[type=checkbox]+label .m22-menu-pois-desc{font-style: italic;opacity:0.7;font-weight:300}
input.m22-menu-pois-box-input[type=checkbox]:checked+label .m22-menu-pois-desc{font-style:normal;opacity:1;font-weight:400}
input.m22-menu-pois-box-input[type=checkbox]:checked+label .m22-menu-pois-see::before{animation: s-ripple 250ms ease-out;}
input.m22-menu-pois-box-input[type=checkbox]:checked+label .m22-menu-pois-see {background: #2aa1c0;border:1px solid #2aa1c0}
input.m22-menu-pois-box-input[type=checkbox]:checked+label .m22-menu-pois-see:after {display: block;}

.m22-menu-pois-see:after {box-sizing: unset;content: '';position: absolute;display: none;}
.m22-menu-pois-box .m22-menu-pois-see:after{left: 7px;top: 3px;width: 3px;height: 8px;border: solid #ffffff;border-width: 0 2px 2px 0;transform: rotate(45deg);}

.m22-menu-pois-see-c{position:relative;width:20px;height:20px}
.m22-menu-pois-see{position: absolute;top: 0px;right: 5px;height: 20px;width: 20px;background: #ffffff;border: 1px solid #2aa1c0;border-radius: 0px;}
.m22-menu-pois-box .m22-menu-pois-see::before {content: '';display: block;position: absolute;left: 0;top: 0;width: 30px;height: 30px;margin-left: -6px;margin-top: -6px;background: #2aa1c0;border-radius: 0px;opacity: 0.8;z-index: 99999;transform: scale(0);}
@keyframes s-ripple {0% {transform: scale(0);}20% {transform: scale(1);}100% {opacity: 0;transform: scale(1);}}
@keyframes s-ripple-dup {	0% {transform: scale(0);}30% {transform: scale(1);}60% {transform: scale(1);}100% {opacity: 0;transform: scale(1);}}
input.m22-menu-pois-box-input[type=checkbox]+label .m22-menu-pois-see::before {animation: s-ripple 250ms ease-out;}
input.m22-menu-pois-box-input[type=checkbox]:checked+label .m22-menu-pois-see::before {animation-name: s-ripple-dup;}


/* extra buttons*/

.m22-menu-hamb{;width:36px;height:36px;background:rgba(255,255,255,0.9);position:absolute;top:10px;left:10px;pointer-events:auto;cursor:pointer}
.m22-menu-hamb:hover{background:#ffeeb3}

.m22-menu-full{width:36px;height:36px;background:rgba(255,255,255,0.9);position:absolute;top:10px;right:10px;pointer-events:auto;cursor:pointer}
.m22-menu-full:hover{background:#ffeeb3}
.m22-full-screen-on .m22-menu-full{display:none}

.m22-menu-full-close{display:none;width:36px;height:36px;background:rgba(255,255,255,0.9);position:absolute;top:10px;right:10px;pointer-events:auto;cursor:pointer}
.m22-menu-full-close:hover{background:#ffeeb3}
.m22-full-screen-on .m22-menu-full-close{display:block}

.m22-full-screen-on{position:fixed;top:0px;left:0px;width:100%;height:100vh;z-index:2000}
.m22-full-screen-on .m22-mapa{height:100vh}
.m22-full-screen-on-body{height:100vh;overflow:hidden}

.m22-menu-login{width:36px;height:36px;background:rgba(255,255,255,0.9);position:absolute;top:10px;left:51px;pointer-events:auto;cursor:pointer;}
.m22-menu-login:hover{background:#ffeeb3}

.m22-menu-edit{width:36px;height:36px;background:rgba(255,255,255,0.9);position:absolute;top:10px;left:92px;pointer-events:auto;cursor:pointer}
.m22-menu-edit-icon-off{display:block}
.m22-menu-edit-icon-on{display:none}
.m22-menu-edit-info{display:none;position:absolute;top:54px;left:10px;background:#2aa1c0;color:#ffffff;font-size:13px;line-height:20px;padding:1px 5px 0px 5px}
.editmode .m22-menu-edit-info{display:block}
.editmode .m22-menu-edit-icon-off{display:none}
.editmode .m22-menu-edit-icon-on{display:block}
.m22-menu-edit:hover{background:#ffeeb3}

.m22-menu-edit-fast{width:36px;height:36px;background:rgba(255,255,255,0.9);position:absolute;top:10px;left:133px;pointer-events:auto;cursor:pointer}
.m22-menu-edit-fast-icon-off{display:block}
.m22-menu-edit-fast-icon-on{display:none}
.m22-menu-edit-info2{display:none;position:absolute;top:79px;left:10px;background:#b00000;color:#ffffff;font-size:13px;line-height:20px;padding:1px 5px 0px 5px}
.editmode2 .m22-menu-edit-info2{display:block}
.editmode2 .m22-menu-edit-fast-icon-off{display:none}
.editmode2 .m22-menu-edit-fast-icon-on{display:block}
.m22-menu-edit-fast:hover{background:#ffeeb3}

.m22-menu-undo {width:36px;height:36px;background:rgba(255,255,255,0.9);position:absolute;top:10px;left:174px;pointer-events:auto;cursor:pointer}
.m22-menu-undo:hover{background:#ffeeb3}


/* leaflet override */
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar{border:none}
.leaflet-control-zoom{opacity:0.9}
.leaflet-bar a:last-child,.leaflet-bar a{border:1px solid #000000}
a.leaflet-disabled{opacity:0.3}
.leaflet-control-zoom-in{margin-bottom:2px}
.leaflet-touch .leaflet-bar a {    width: 34px;    height: 34px;    line-height: 34px;}
.leaflet-touch .leaflet-bar{padding:1px;background:#ffffff;border-radius:0px}
.leaflet-touch .leaflet-bar a:first-child,.leaflet-touch .leaflet-bar a:last-child{border-radius:0px}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out{font-size:22px;text-decoration:none;}
.leaflet-bar a:hover{background:#ffeeb3}
.leaflet-bar a, .leaflet-bar a:hover{border:1px solid #000000}

/* karta */

.leaflet-fade-anim .leaflet-popup{}
.m22-karta *{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;}
.m22-karta{z-index:1000}
.m22-karta .leaflet-popup-content-wrapper{border-radius:0px;}
.m22-karta .leaflet-popup-scrolled{border:none;}
.m22-karta .leaflet-popup-content{margin:5px 5px 5px 5px;font-size:15px;line-height:17px;min-height:36px;max-height:600px;overflow-y:auto;}
.m22-karta a.leaflet-popup-close-button{padding:0px;top:5px;right:6px;width:16px;height:16px;background:#cccccc;color:#ffffff;text-align:center;font-size:16px;line-height:16px;}
.m22-karta a.leaflet-popup-close-button span{display:block;font-size:17px;line-height:13px;width:16px;text-align:center;margin-bottom:2px}
.m22-karta a.leaflet-popup-close-button:hover{background:#c0432a;color:#ffffff}
.m22-karta h3{font-size:15px;line-height:17px;text-align:left;margin:0px;color:#000000}
.m22-karta p{font-size:13px;line-height:17px;margin:3px 0px 0px 0px;padding:0px 5px 5px 3px}
.m22-karta-img{width:280px;height:auto;margin:auto}
.m22-karta-img-edit{width:280px}
.m22-karta-img:hover{opacity:0.7;cursor:zoom-in;}
.m22-karta-ytb{width:280px;height:auto;margin:auto}
h3 span.m22-karta-author{color:#999999;font-size:12px;line-height:15px;font-weight:400;white-space:nowrap;float:right;padding-left:5px;padding-top:2px}
p.m22-karta-edit-autor{text-align:right;color:#999999;font-size:12px;line-height:16px;}
.m22-karta-top{display:grid;grid-template-columns:32px auto;grid-gap:10px;align-items: center;margin-right:25px;min-height:36px;margin-bottom:5px}
.m22-karta-ico{max-width:32px;max-height:32px;}
.m22-karta-bot{padding-top:5px;border-top:1px dashed #cccccc;display:grid;grid-template-columns:auto auto auto;grid-gap:3px 5px;}
.m22-karta-bot-ico{width:20px;height:20px}
.m22-karta-bot div,.m22-karta-bot a{margin-right:3px;cursor:pointer;display:inline-grid;grid-template-columns:20px auto;grid-gap:3px;align-items: center;}
.m22-karta-bot div:hover .m22-karta-bot-ico,.m22-karta-bot a:hover .m22-karta-bot-ico{filter:invert(100%);}
.m22-karta-bot div span, .m22-karta-bot a span {opacity:0.7}
.m22-karta-bot div:hover span, .m22-karta-bot a:hover span{opacity:1;background:#c0432a;border-radius:6px;}
p.m22-karta-bot-p{font-size:12px;line-height:13px;margin:0px;padding:0px;color:#333333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m22-karta-bot div:hover p, .m22-karta-bot a:hover p{color:#c0432a;text-decoration:none;}
.m22-karta iframe{margin:auto}

.m22-karta-next-prev-c{display:grid;grid-template-columns:auto auto;grid-gap:5px;margin-bottom:5px;margin-right:10px;cursor:pointer}
.m22-karta-next-prev-c img{width:20px;height:20px;display:block;opacity:0.8}
.m22-karta-next-prev-c p{margin:0px;padding:0px;font-size:14px;color:#999999;line-height:16px;padding-bottom:2px}
.m22-karta-next-c{display:grid;grid-template-columns:auto 20px;grid-gap:5px;align-items: center;justify-items: end;}
.m22-karta-prev-c{display:grid;grid-template-columns:20px auto;grid-gap:5px;align-items: center;justify-items: start;}
.m22-karta-next-c:hover p, .m22-karta-prev-c:hover p{color:#c0432a;}
.m22-karta-next-c:hover img, .m22-karta-prev-c:hover img{filter:invert(100%);opacity:1;}
.m22-karta-next-c:hover span, .m22-karta-prev-c:hover span{background:#c0432a;border-radius:20px}

/* add marker box */
h3.m22-add-mark-h3{font-size:15px;line-height:17px;text-align:left;margin:0px 0px 5px 10px;min-width:280px}
.m22-add-mark-c{background:#f1f1f1;padding:5px;display:grid;grid-template-columns:32px auto 50px;grid-gap:5px;align-items:center;margin-bottom:1px}
.m22-add-mark-c2{background:#f1f1f1;padding:5px;display:grid;grid-template-columns:32px auto;grid-gap:3px;align-items:center;margin-bottom:1px;}
.m22-add-mark-sel1{border:1px solid #cccccc;font-size:14px;line-height:32px;padding:3px;width:100%;background:#ffffff;}
.m22-add-mark-sel2{border:1px solid #cccccc;font-size:15px;line-height:18px;padding:3px 5px 3px 5px;width:100%;background:#ffffff;font-weight:600}
.m22-add-mark-sel3{border:1px solid #cccccc;font-size:14px;line-height:16px;padding:3px 5px 3px 5px;width:100%;background:#ffffff;height:80px;resize:vertical;}
.m22-add-mark-sel4{border:1px solid #cccccc;font-size:14px;line-height:17px;padding:3px 5px 3px 5px;width:100%;background:#ffffff;height:auto}
.m22-add-mark-sel1:focus,.m22-add-mark-sel2:focus,.m22-add-mark-sel3:focus{border:1px solid #c0432a}
/* Pola edycji znacznika mają stałe białe tło - wymuszamy ciemny tekst, aby był czytelny
   również w ciemnym motywie (body.dark), gdzie dziedziczony kolor tekstu jest jasny. */
.m22-add-mark-sel1,.m22-add-mark-sel2,.m22-add-mark-sel3,.m22-add-mark-sel4{color:#222222;}
.m22-add-mark-sel4::placeholder{color:#999999;}

.m22-add-but{background:#2aa1c0;color:#ffffff;font-size:13px;line-height:24px;padding:1px 5px 0px 5px;text-align:center;display:inline-block;cursor:pointer}
.m22-add-but2{background:#31c02a;color:#ffffff;font-size:13px;line-height:24px;padding:1px 5px 0px 5px;text-align:center;display:inline-block;cursor:pointer}
.m22-add-but3{background:#c06d2a;color:#ffffff;font-size:13px;line-height:24px;padding:1px 5px 0px 5px;text-align:center;display:inline-block;cursor:pointer}
.m22-add-mark-c img{margin:auto;max-width:32px;max-height:32px}
.m22-add-but:hover,.m22-add-but2:hover,.m22-add-but3:hover,.m22-add-mark-c2 input[type="file"]::file-selector-button:hover{background:#c0432a}
.m22-ico-list-c{position:absolute;top:0px;left:0px;right:0px;bottom:0px;background:#ffffff;margin:5px;display: grid; grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));overflow-y:auto;align-items: start;align-content: start;z-index:2 }
.m22-ico-list-c div{display:inline-grid;grid-template-columns:32px auto;grid-gap:5px;align-items: center;cursor:pointer;padding-right:5px;height:32px;}
.m22-ico-list-c div p{margin:0px;padding:0px;font-size:12px;line-height:14px}
.m22-ico-list-c div:hover{background:#ffeeb3}
.m22-add-mark-back1{background:#f1f1f1;padding:5px;margin-bottom:1px}
.m22-add-mark-lab1{background:#999999;color:#ffffff;font-size:12px;line-height:24px;padding:1px 5px 0px 5px;text-align:center;}
.m22-add-mark-c2 input[type="file"]::file-selector-button{background:#31c02a;color:#ffffff;font-size:13px;line-height:24px;padding:1px 8px 0px 8px;text-align:center;inline-display:block;cursor:pointer;border:none}
.m22-add-mark-bot-c{padding-top:5px}
.m22-add-mark-bot2-c{padding-top:10px}
.m22-add-file-box{font-size:14px;background:#ffffff;}

@media screen and (max-width: 480px){
.m22-menu{width:100%;max-width:calc(100% - 20px);}
.m22-mapa {height:65vh;}
}

/* janusz */
.m22-label {position:absolute;}
.m22-label-inner {transform:translate(-50%, -50%);cursor:default;white-space:nowrap;text-align:center;font-family:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
.m22-label-inner-0 {font-size:24px;line-height:24px;color:rgba(255,255,255,0.9);font-weight:300}
.m22-label-inner-1 {font-size:18px;line-height:18px;color:rgba(255,255,255,0.9);font-weight:300}
.m22-label-inner-2 {font-size:14px;line-height:14px;color:rgba(255,255,255,0.9);font-weight:300}
.m22-label-inner-3 {font-size:24px;line-height:24px;color:rgba(255,255,255,0.9);font-weight:700}
.m22-label-inner-4 {font-size:18px;line-height:18px;color:rgba(255,255,255,0.9);font-weight:700}
.m22-label-inner-5 {font-size:14px;line-height:14px;color:rgba(255,255,255,0.9);font-weight:700}
.m22-label-inner-6 {font-size:24px;line-height:24px;color:rgba(0,0,0,0.8);font-weight:300}
.m22-label-inner-7 {font-size:18px;line-height:18px;color:rgba(0,0,0,0.8);font-weight:300}
.m22-label-inner-8 {font-size:14px;line-height:14px;color:rgba(0,0,0,0.8);font-weight:300}
.m22-label-inner-9 {font-size:24px;line-height:24px;color:rgba(0,0,0,0.8);font-weight:700}
.m22-label-inner-10 {font-size:18px;line-height:18px;color:rgba(0,0,0,0.8);font-weight:700}
.m22-label-inner-11 {font-size:14px;line-height:14px;color:rgba(0,0,0,0.8);font-weight:700}
.m22-label-inner-12 {font-size:24px;line-height:24px;color:rgba(255,255,255,0.9)}
.m22-label-inner-13 {font-size:18px;line-height:18px;color:rgba(255,255,255,0.9)}
.m22-label-inner-14 {font-size:14px;line-height:14px;color:rgba(255,255,255,0.9)}
.m22-label-inner-15 {font-size:18px;line-height:18px;color:rgba(255,255,255,0.9);font-weight:300;font-style: italic;}


.leaflet-grab{cursor:auto}
/* TruckSimMap mini site - standalone stylesheet */

:root {
    --bg: #14171c;
    --bg-panel: #1e232b;
    --bg-box: #262c36;
    --border: #39414e;
    --text: #e8eaed;
    --text-dim: #9aa4b2;
    --accent: #e8a33d;
    --accent-dark: #c9882a;
}

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

html, body {
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--bg) url("/tsm-bg.svg") center / cover no-repeat fixed;
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Hero header: game screenshot + compact logo + docked menu */

.site-hero {
    position: relative;
    flex-shrink: 0;
    background: #10141a url("/tsm-img-2.jpg") center 42% / cover no-repeat;
    border-bottom: 3px solid var(--accent);
    overflow: hidden;
}

.site-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 20, 26, 0.55) 0%, rgba(16, 20, 26, 0.35) 45%, rgba(16, 20, 26, 0.94) 100%);
}

.hero-inner {
    position: relative;
    max-width: 1060px;
    margin: 0 auto;
    padding: 44px 24px 26px;
    text-align: center;
}

.hero-brand {
    display: inline-block;
}

.hero-brand img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
}

.hero-tagline {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #d6dce4;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.hero-nav {
    margin-top: 26px;
}

/* Top: logo banner + button menu */

.site-top {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 28px 24px 0;
    text-align: center;
}

.site-banner {
    display: block;
    width: 100%;
    max-width: 880px;
    height: auto;
    margin: 0 auto 22px;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}

.site-nav {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    border-radius: 10px;
    background: linear-gradient(180deg, #2a323e, #1e232b);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.nav-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    flex-shrink: 0;
}

.nav-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
}

.nav-btn.active {
    background: linear-gradient(180deg, #f0b04a, var(--accent-dark));
    border-color: var(--accent);
    color: #14171c;
}

.nav-btn.active:hover {
    color: #14171c;
    transform: none;
}

/* Map page */

.map-wrap {
    flex: 1;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 26px 24px 40px;
}

.map-wrap h1 {
    font-size: 24px;
    margin-bottom: 6px;
}

.map-wrap p.lead {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 14px;
}

.map-frame {
    min-height: 500px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 15px;
}

.about-box {
    margin-top: 26px;
    background: rgba(30, 35, 43, 0.92);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 22px 26px;
}

.about-box h2 {
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 10px;
}

.about-box p {
    line-height: 1.7;
    font-size: 15px;
    color: var(--text);
}

.about-box p + p {
    margin-top: 12px;
}

.about-box a,
.content a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-dark);
}

.about-box a:hover,
.content a:hover {
    color: #f5b955;
    border-bottom-color: #f5b955;
}

/* Generic content panel on map page */

.panel {
    margin-top: 26px;
    background: rgba(30, 35, 43, 0.92);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px 26px 26px;
}

.panel h2 {
    font-size: 20px;
    color: var(--accent);
    margin-bottom: 12px;
}

.panel p {
    line-height: 1.7;
    font-size: 15px;
    margin-bottom: 14px;
}

.panel a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-dark);
}

.panel a:hover {
    color: #f5b955;
    border-bottom-color: #f5b955;
}

/* Stat tiles */

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 22px 0;
}

.stat-tile {
    background: var(--bg-box);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 10px 14px;
    text-align: center;
}

.stat-tile .num {
    display: block;
    font-size: 30px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.1;
}

.stat-tile .lbl {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
}

/* Screenshot gallery */

.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

.gallery figure {
    background: var(--bg-box);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.gallery figcaption {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-dim);
}

/* Links list */

.links-list {
    margin: 0 0 4px 22px;
    line-height: 2;
    font-size: 15px;
}

.links-list li::marker {
    color: var(--accent);
}

/* Content page */

.content {
    max-width: 1012px;
    width: calc(100% - 48px);
    margin: 26px auto 48px;
    padding: 34px 42px;
    flex: 1 0 auto;
    background: rgba(20, 23, 28, 0.88);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.content h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

.content h2 {
    font-size: 20px;
    margin: 28px 0 10px;
    color: var(--accent);
}

.content p {
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 14px;
    font-size: 15px;
    text-align: justify;
    hyphens: auto;
}

.content ul {
    margin: 0 0 16px 22px;
    line-height: 1.8;
    font-size: 15px;
}

.content li::marker {
    color: var(--accent);
}

.info-box {
    background: var(--bg-box);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    padding: 18px 22px;
    margin: 24px 0;
}

.info-box h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.info-box p {
    margin-bottom: 0;
    color: var(--text-dim);
}

/* Article: lead, byline, TOC, DLC sections */

.lead-art {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.byline {
    font-size: 13px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.toc-box {
    background: var(--bg-box);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    padding: 18px 24px;
    margin: 0 0 26px;
}

.toc-box h2 {
    font-size: 16px;
    color: var(--accent);
    margin: 0 0 10px;
}

.toc-box ol {
    margin: 0 0 0 22px;
    columns: 2;
    column-gap: 32px;
    line-height: 1.9;
    font-size: 14px;
}

.toc-box li::marker {
    color: var(--accent);
}

.toc-box a {
    border-bottom: none;
}

.dlc-section {
    scroll-margin-top: 16px;
    border-top: 1px solid var(--border);
    margin-top: 26px;
}

.dlc-stats ul {
    margin: 0 0 0 20px;
    line-height: 1.8;
    font-size: 14px;
}

.dlc-stats li::marker {
    color: var(--accent);
}

.art-fig {
    margin: 18px 0;
    background: var(--bg-box);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.art-fig img {
    display: block;
    width: 100%;
    height: auto;
}

.art-fig figcaption {
    padding: 8px 14px;
    font-size: 12px;
    color: var(--text-dim);
}

/* Footer */

.site-footer {
    background: rgba(30, 35, 43, 0.92);
    border-top: 1px solid var(--border);
    padding: 14px 24px;
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
}

/* Responsive */

@media (max-width: 900px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 640px) {
    .site-top {
        padding: 16px 14px 0;
    }

    .hero-inner {
        padding: 26px 14px 18px;
    }

    .hero-brand img {
        max-width: 330px;
    }

    .hero-tagline {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .hero-nav {
        margin-top: 16px;
    }

    .site-nav {
        gap: 10px;
    }

    .nav-btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 12px 14px;
        font-size: 13px;
        letter-spacing: 0.5px;
        gap: 8px;
    }

    .nav-btn svg {
        width: 20px;
        height: 20px;
    }

    .map-wrap {
        padding: 16px 12px 28px;
    }

    .map-wrap h1 {
        font-size: 19px;
    }

    .map-frame {
        min-height: 440px;
    }

    .about-box,
    .panel {
        padding: 18px 16px 20px;
        margin-top: 18px;
    }

    .panel h2,
    .about-box h2 {
        font-size: 17px;
    }

    .stat-tile {
        padding: 12px 8px 10px;
    }

    .stat-tile .num {
        font-size: 24px;
    }

    .stat-tile .lbl {
        font-size: 10px;
        letter-spacing: 0.5px;
    }

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

    .links-list {
        line-height: 1.7;
    }

    .links-list li {
        margin-bottom: 8px;
    }

    .content {
        width: calc(100% - 24px);
        margin: 16px auto 32px;
        padding: 24px 20px;
    }
}

@media (max-width: 380px) {
    .stats-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .stat-tile .num {
        font-size: 20px;
    }
}

/* Billboard (GPT) pod headerem */
.billboard-top {
    flex-shrink: 0;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 14px 24px 0;
    text-align: center;
}
.billboard-top > div {
    display: inline-block;
    min-width: 300px;
    min-height: 50px;
    max-width: 100%;
}