:root{--sky1:#8fd3ff;--sky2:#c9ecff;--grass:#6cc04a;--grass2:#4e9a34;--dirt:#8a5a34;--dirt2:#6e4426;--line:#2b1a0d;--card:#fff8ec;--orange:#f28c28;--blue:#3a6ea5;--red:#d9443b}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;color:#2b1a0d;min-height:100vh;
 background:linear-gradient(var(--sky1),var(--sky2) 60%,#e9f7ff);background-attachment:fixed;display:flex;flex-direction:column}
a{color:var(--blue);font-weight:bold}
.clouds{position:fixed;inset:0;pointer-events:none;z-index:-1;background:
 radial-gradient(60px 26px at 12% 14%,#fff 98%,transparent),radial-gradient(44px 22px at 16% 11%,#fff 98%,transparent),
 radial-gradient(70px 28px at 70% 22%,#fff 98%,transparent),radial-gradient(48px 22px at 75% 18%,#fff 98%,transparent),
 radial-gradient(50px 20px at 45% 8%,#ffffffd0 98%,transparent)}
header{position:sticky;top:0;z-index:5;background:var(--grass);border-bottom:6px solid var(--line);
 box-shadow:inset 0 -10px 0 var(--grass2)}
.bar{max-width:1100px;margin:auto;display:flex;align-items:center;gap:12px;padding:8px 12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand img{width:52px;height:52px;filter:drop-shadow(2px 3px 0 #0005)}
.brand b{font-size:26px;letter-spacing:1px;-webkit-text-stroke:1.5px var(--line);text-shadow:2px 3px 0 var(--line)}
nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
nav a{color:#fff;text-decoration:none;padding:6px 10px;border:3px solid var(--line);border-radius:10px;background:var(--grass2);
 box-shadow:0 3px 0 var(--line);font-size:15px}
nav a.on,nav a:hover{background:var(--orange)}
.burger{display:none;margin-left:auto;font-size:26px;background:var(--orange);border:3px solid var(--line);border-radius:10px;color:#fff;padding:2px 10px}
main{max-width:1100px;width:100%;margin:18px auto;padding:0 12px;flex:1}
.card{background:var(--card);border:4px solid var(--line);border-radius:16px;padding:16px 18px;margin:0 0 18px;box-shadow:0 6px 0 var(--line)}
h1,h2,h3{margin:.2em 0 .5em}
h2{color:#fff;-webkit-text-stroke:1.2px var(--line);text-shadow:2px 3px 0 var(--line);font-size:28px}
.card h2{color:var(--orange)}
.hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:linear-gradient(#fff8ec,#ffe9c9)}
.hero img{width:150px}
.hero div{flex:1;min-width:240px}
.btn{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;font-weight:bold;border:3px solid var(--line);
 border-radius:12px;padding:8px 14px;box-shadow:0 4px 0 var(--line);cursor:pointer;font-size:15px;font-family:inherit}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.btn.blue{background:var(--blue)}.btn.red{background:var(--red)}.btn.small{padding:4px 9px;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.srv{background:#fff;border:4px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 5px 0 var(--line)}
.srv .top{background:var(--grass);border-bottom:4px solid var(--line);padding:8px 12px;color:#fff;box-shadow:inset 0 -6px 0 var(--grass2)}
.srv .top b{-webkit-text-stroke:.8px var(--line);text-shadow:1px 2px 0 var(--line);font-size:17px}
.srv.off .top{background:#9a9a9a;box-shadow:inset 0 -6px 0 #777}
.srv .body{padding:10px 12px;background:repeating-linear-gradient(45deg,#fff,#fff 10px,#fbf4e8 10px,#fbf4e8 20px)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:#5f5;margin-right:6px}
.off .dot{background:#f55}
.addr{font-family:Consolas,monospace;background:#2b1a0d;color:#ffe08a;padding:4px 8px;border-radius:8px;display:inline-block;margin:6px 0;cursor:pointer}
.players{list-style:none;padding:0;margin:6px 0 0;max-height:220px;overflow:auto}
.players li{display:flex;justify-content:space-between;padding:3px 6px;border-bottom:2px dashed #e0d2bd}
.players li .clan{color:#888;font-size:12px;margin-left:5px}
.muted{color:#7a6650}
.tees{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.tee{text-align:center;background:#fff;border:4px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 5px 0 var(--line)}
.tee svg{width:90px;height:90px}
.role{display:inline-block;background:var(--blue);color:#fff;border-radius:8px;padding:1px 8px;font-size:13px;border:2px solid var(--line)}
.news img{max-width:100%;border:3px solid var(--line);border-radius:10px}
.date{font-size:13px;color:#7a6650}
ol.rules li{margin:8px 0;padding:8px 10px;background:#fff;border:3px solid var(--line);border-radius:10px}
.comments{margin-top:10px;border-top:3px dashed #e0d2bd;padding-top:8px}
.comment{background:#fff;border:2px solid #d7c4a8;border-radius:10px;padding:6px 10px;margin:6px 0}
input,textarea,select{width:100%;padding:9px;border:3px solid var(--line);border-radius:10px;font:inherit;background:#fff;margin:4px 0 10px}
textarea{min-height:90px}
label{font-weight:bold;font-size:14px}
.ground{height:150px;margin-top:20px;background:url(/img/ground.svg) repeat-x 0 46px/96px 120px,url(/img/bushes.svg) repeat-x 0 0/420px 60px}
footer{background:url(/img/ground.svg) repeat 0 -40px/96px 120px;color:#ffe9c9;text-align:center;padding:4px 12px 22px;font-size:14px;margin-top:-8px;text-shadow:1px 1px 0 #4a2a10}
footer a{color:#ffe08a}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--line);color:#fff;padding:10px 16px;border-radius:10px;z-index:9}
@media(max-width:760px){.burger{display:block}nav{display:none;width:100%}nav.open{display:flex}nav a{flex:1 1 40%;text-align:center}
 .brand b{font-size:21px}.grid{grid-template-columns:1fr}h2{font-size:24px}}

.tee .teesvg{width:90px;height:90px}
.av{width:40px;height:40px;border-radius:50%;border:3px solid var(--line);background:#fff;object-fit:cover;vertical-align:middle;flex:none;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.av.big{width:96px;height:96px}.av .teesvg{width:100%;height:100%}
.badge{display:inline-block;border-radius:7px;padding:0 6px;font-size:12px;color:#fff;border:2px solid var(--line);margin-left:4px;vertical-align:middle}
.who{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:inherit}
.ftable{width:100%;border-collapse:collapse}.ftable td{padding:8px;border-bottom:2px dashed #e0d2bd;vertical-align:top}
.ftable tr:hover td{background:#fff}.small{font-size:13px}
.post{display:flex;gap:12px;background:#fff;border:3px solid var(--line);border-radius:12px;padding:10px;margin:10px 0}
.post .side{width:110px;text-align:center;flex:none;font-size:13px;word-break:break-word}
.post .side .av{width:72px;height:72px}
.post .msg{flex:1;min-width:0;overflow-wrap:anywhere}
.msg blockquote{border-left:4px solid var(--orange);margin:6px 0;padding:4px 10px;background:#fff6e6}
.msg pre{background:#2b1a0d;color:#ffe9c9;padding:8px;border-radius:8px;overflow:auto}
.msg img{max-width:100%}
.pager{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}.pager a{padding:3px 9px;border:2px solid var(--line);border-radius:7px;background:#fff;text-decoration:none}.pager a.on{background:var(--orange);color:#fff}
.tools{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}.tools button{padding:2px 8px;border:2px solid var(--line);border-radius:6px;background:#fff;font-weight:bold;cursor:pointer}
.pill{display:inline-block;font-size:12px;background:#2b1a0d;color:#fff;border-radius:6px;padding:0 6px;margin-right:4px}
@media(max-width:600px){.post{flex-direction:column}.post .side{width:auto;display:flex;gap:8px;align-items:center;text-align:left}.post .side .av{width:44px;height:44px}}
/* ---- site chat (Teeworlds style) ---- */
#chat{position:fixed;top:70px;right:10px;bottom:10px;width:290px;z-index:50;display:flex;flex-direction:column;background:#fffaf0;border:4px solid #2b1a0d;border-radius:14px;box-shadow:0 5px 0 rgba(0,0,0,.25);overflow:hidden;font-size:14px}
.ch-head{display:flex;justify-content:space-between;align-items:center;background:#f28c28;color:#fff;font-weight:bold;padding:6px 10px;border-bottom:4px solid #2b1a0d;text-shadow:0 2px 0 #2b1a0d}
.ch-x{display:none;background:none;border:0;color:#fff;font-size:18px;cursor:pointer}
.ch-list{flex:1;overflow-y:auto;padding:6px}
.ch-m{display:flex;gap:6px;padding:4px;border-bottom:2px dashed #e0d2bd}
.ch-av{width:30px;height:30px;flex:none;border-radius:50%;object-fit:cover;display:inline-block}.ch-av svg{width:30px;height:30px}
.ch-b{min-width:0;flex:1}.ch-b small{color:#8a7560}.ch-t{overflow-wrap:anywhere;white-space:pre-wrap}
.ch-del{float:right;border:0;background:none;cursor:pointer;opacity:.6}.ch-del:hover{opacity:1}
.ch-form{display:flex;gap:4px;padding:6px;border-top:4px solid #2b1a0d;background:#f6e7cf}
.ch-form input{flex:1;min-width:0;padding:6px;border:3px solid #2b1a0d;border-radius:8px}
.ch-form button{border:3px solid #2b1a0d;border-radius:8px;background:#4e9a34;color:#fff;font-weight:bold;cursor:pointer;padding:0 10px}
.ch-note{padding:6px;color:#6b5743;text-align:center}
#chatbtn{display:none;position:fixed;right:14px;bottom:14px;z-index:51;width:56px;height:56px;border-radius:50%;border:4px solid #2b1a0d;background:#f28c28;font-size:24px;box-shadow:0 4px 0 rgba(0,0,0,.3);cursor:pointer}
#chatbtn i{position:absolute;top:-6px;right:-6px;background:#d9443b;color:#fff;font-style:normal;font-size:12px;border-radius:9px;padding:0 5px}#chatbtn i:empty{display:none}
@media(min-width:901px){body.has-chat{padding-right:310px}}
@media(max-width:900px){#chat{display:none;top:auto;left:8px;right:8px;width:auto;height:70vh}#chat.open{display:flex}#chat.open~#chatbtn{display:none!important}#chatbtn{display:block}.ch-x{display:block}}