:root {
  --bg: #2c2c2c; --paper: #454545; --paper-deep: #3a3a3a; --paper-edge: #2f2f2f; --row: #383838; --row-alt: #3f3f3f; --row-hover: #5b5b5b;
  --ink: #dedede; --ink-dim: #999; --ink-head: #8c8c8c; --link: #c3c3c3; --card: #e8dcc3; --card-ink: #2b1c0c; --card-line: #907a61;
  --ok: #13c505; --ok-bg: #256302; --ok-line: #52d004; --err: #ea171c; --err-bg: #610e0a; --err-line: #c12a07; --warn: #f9d613; --accent: #d20000; --field: #54514d;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font: 12px/1.5 Arial, Helvetica, sans-serif; color: var(--ink); background: var(--bg) radial-gradient(ellipse at 50% 0, #4a4a4a 0, var(--bg) 60%) no-repeat; }
a { color: var(--link); }
a:hover { color: #fff; }
h1 { font-size: 1.5em; margin: 0 0 12px; color: #fff; border-bottom: 1px dotted #202020; padding-bottom: 4px; }
h1.graffiti { font-family: Impact, "Arial Black", sans-serif; font-size: 2.4em; letter-spacing: 1px; color: #f1ca27; text-shadow: 3px 3px 0 #000; border: none; transform: rotate(-1.5deg); display: inline-block; }
h2 { font-size: 1.15em; margin: 0 0 10px; color: #fff; border-bottom: 1px dotted #202020; padding-bottom: 3px; }
h3 { font-size: 1em; margin: 12px 0 6px; color: var(--ink-head); font-family: Georgia, serif; text-transform: uppercase; letter-spacing: 0.05em; }
p { margin: 0 0 10px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #2a2a2a; vertical-align: top; }
th { font-family: Georgia, serif; text-transform: uppercase; font-size: 11px; color: var(--ink-head); background: var(--row); }
tbody tr:nth-child(odd) td { background: var(--row-alt); }
tbody tr:nth-child(even) td { background: var(--row); }
tbody tr:hover td { background: #4a4a4a; }
tr.me td { background: #4d4325 !important; }
td.num, th.num { text-align: right; white-space: nowrap; }
table.kv td:first-child { color: var(--ink-dim); width: 40%; }
table.kv tr td { background: transparent !important; }
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea {
  font: inherit; padding: 4px 6px; border: 1px solid #000; background: var(--field); color: #e5e5e5; border-radius: 2px; max-width: 100%;
}
textarea { width: 100%; min-height: 90px; background: #42403f; color: #b7b7b7; }
input:focus, select:focus, textarea:focus { outline: 1px solid #767676; }
button, .btn {
  font: inherit; font-weight: bold; padding: 5px 12px; border: 1px solid #333; border-radius: 3px; cursor: pointer;
  background: linear-gradient(#6b6864, var(--field)); color: #e0e0e0; text-decoration: none; display: inline-block; text-shadow: 0 1px 0 #000;
}
button:hover, .btn:hover { border-color: #767676; color: #fff; }
button.secondary, .btn.secondary { background: #3d3b39; }
button.danger, .btn.danger { background: linear-gradient(#8f2a22, var(--err-bg)); border-color: #3a0309; }
button.primary, .btn.primary { background: linear-gradient(#b41a1a, #7a0d0d); border-color: #3a0309; }
button:disabled, .btn.disabled { background: #2d2b2a; color: #7e7e7e; border-color: #222; cursor: default; text-shadow: none; }
button.small, .btn.small { padding: 2px 8px; font-weight: normal; }
button.linkbtn { background: none; border: none; padding: 0; color: var(--card-ink); font-weight: bold; text-decoration: underline; text-shadow: none; cursor: pointer; }
form.inline { display: inline; }
label.block { display: block; margin: 6px 0 2px; font-weight: bold; }
.formgrid { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.formgrid input:not([type=checkbox]):not([type=radio]):not([type=file]), .formgrid select, .formgrid textarea { width: 100%; min-width: 0; }
.formgrid button { justify-self: start; }
.formgrid label { font-weight: bold; }
.formgrid .chk { font-weight: normal; }
.help, .muted { color: var(--ink-dim); font-style: italic; }
.ok { color: var(--ok); } .bad { color: var(--err); } .warn { color: var(--warn); }
.right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; }
.flash { padding: 8px 12px; margin: 0 0 12px; border: 1px solid; border-radius: 3px; }
.flash-ok { background: var(--ok-bg); border-color: var(--ok-line); color: #e9ffe4; }
.flash-err { background: var(--err-bg); border-color: var(--err-line); color: #ffe4e1; }
.flash-info { background: #1d3a52; border-color: #3f7fb3; color: #e2edf5; }
.flash ul { margin: 0; padding-left: 18px; }
.flash a { color: #fff; }
.gbox { background: var(--paper-deep); border: 1px solid var(--paper-edge); border-radius: 4px; padding: 12px 14px; margin-bottom: 14px; }
.gbox.danger { border-color: #6b0002; }
.info { background: #303030; border: 1px solid #414141; padding: 10px 12px 10px 44px; position: relative; margin-bottom: 14px; border-radius: 3px; }
.info::before { content: 'i'; position: absolute; left: 10px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: #2f6f9f; color: #fff; text-align: center; font: bold 16px/24px Georgia, serif; }
.cols { display: flex; gap: 24px; align-items: flex-start; }
.cols > * { min-width: 0; }
.cols .cols > .gbox { flex: 1 1 0; min-width: 0; }
.col-main { flex: 1; }
.col-side { flex: 0 0 200px; }
.narrow { flex: 0 0 150px; }
.bar { display: inline-block; vertical-align: middle; width: 200px; height: 12px; background: #222; border: 1px solid #000; overflow: hidden; margin-left: 6px; }
.bar > span { display: block; height: 100%; background: linear-gradient(#5be05b, #189f00); }
.bar.blue > span { background: linear-gradient(#6fb3ff, #2f6f9f); }
.bar.wide { width: 100%; margin: 4px 0; }
.processbar { height: 12px; background: #222; border: 1px solid #000; }
.processbar > span { display: block; height: 100%; background: linear-gradient(#5be05b, #189f00); }

/* ---------- not logged in ---------- */
.noauth-wrap { width: 945px; max-width: 100%; margin: 30px auto; padding: 0 10px; }
.noauth-logo { font-family: Impact, "Arial Black", sans-serif; font-size: 44px; letter-spacing: 1px; color: #f2e9d2; text-shadow: 3px 3px 0 #000; margin-bottom: 6px; transform: rotate(-1deg); display: inline-block; padding: 4px 14px; background: var(--card); color: var(--card-ink); clip-path: polygon(0 8%, 3% 0, 97% 4%, 100% 90%, 96% 100%, 2% 96%); }
.noauth-logo a { color: var(--card-ink); text-decoration: none; }
.noauth-logo small { display: block; font: bold 12px Arial, sans-serif; letter-spacing: 0.3em; text-transform: uppercase; color: #7a0d0d; text-shadow: none; }
.slogan { color: #fff; font: bold 18px Georgia, serif; margin: 6px 0 16px; text-shadow: 1px 1px 0 #000; }
.start { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.start .login-box { order: 2; }
.start .teaser { order: 1; }
.start .login-box { background: var(--card); color: var(--card-ink); padding: 12px 14px; clip-path: polygon(0 3%, 2% 0, 100% 1%, 99% 100%, 1% 98%); }
.start .login-box h2 { color: var(--card-ink); border-bottom: 1px solid var(--card-line); font-family: Georgia, serif; text-transform: uppercase; }
.start .login-box input[type=text], .start .login-box input[type=password] { width: 100%; }
.start .login-box a { color: var(--accent); }
.start .login-box .online { color: #5c4a35; font-size: 11px; margin-top: 10px; }
.start .teaser { background: var(--paper); border: 1px solid #222; padding: 16px 20px; box-shadow: 0 0 0 4px #333; }
.start .teaser ul { columns: 2; margin: 8px 0 12px; padding-left: 18px; font-weight: bold; }
.start .teaser li { margin-bottom: 4px; break-inside: avoid; }
.start .register { margin-top: 16px; background: var(--paper-deep); border: 1px solid var(--paper-edge); padding: 12px 14px; }
.start .register .row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 10px; align-items: center; margin-bottom: 6px; }
.start .register input[type=text], .start .register input[type=email], .start .register input[type=password] { width: 100%; max-width: 320px; }
.city-strip { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.city-strip span { background: var(--card); color: var(--card-ink); padding: 1px 8px; font-size: 11px; transform: rotate(-1deg); }
.city-strip span:nth-child(even) { transform: rotate(1deg); }
.noauth-wrap .box, .noauth-wrap .legal { background: var(--paper); border: 1px solid #222; padding: 16px 20px; margin-top: 16px; box-shadow: 0 0 0 4px #333; }
.footer { color: #ababab; font-size: 11px; padding: 20px 4px; text-align: center; }
.footer a { color: #ababab; }
.footer .copy { display: block; margin-top: 4px; color: #555; }
.rules li { margin-bottom: 8px; }
.legal table td { font-size: 11px; }

/* ---------- in game ---------- */
.frame { width: 1004px; max-width: 100%; margin: 14px auto; position: relative; }
.gamehead { display: flex; align-items: flex-end; gap: 20px; padding: 10px 18px 0; height: 103px; background: var(--card); color: var(--card-ink); clip-path: polygon(0 6%, 1% 0, 99% 2%, 100% 94%, 98% 100%, 1% 97%); }
.gamehead .logo { font-family: Impact, "Arial Black", sans-serif; font-size: 34px; letter-spacing: 1px; color: var(--card-ink); text-decoration: none; line-height: 1; padding-bottom: 14px; transform: rotate(-2deg); }
.gamehead .logo small { display: block; font: bold 10px Arial, sans-serif; letter-spacing: 0.3em; text-transform: uppercase; color: #7a0d0d; }
.topmenu { display: flex; gap: 4px; margin-left: auto; align-self: flex-end; }
.topmenu a { display: block; padding: 0 12px 8px; text-align: center; font: bold 10px/1.2 Arial, sans-serif; text-transform: uppercase; color: var(--card-ink); text-decoration: none; position: relative; }
.topmenu a .ico { display: block; width: 44px; height: 38px; margin: 0 auto 4px; border-radius: 6px; background: #3b2a1a center/34px 30px no-repeat; }
.topmenu a:hover .ico, .topmenu a.active .ico { background: #7a0d0d; }
.topmenu a.active { text-decoration: underline; }
.topmenu .badge { position: absolute; top: -4px; right: 4px; background: var(--accent); color: #fff; border-radius: 9px; padding: 1px 6px; font-size: 10px; }
.weather { width: 54px; height: 54px; border-radius: 50%; margin-bottom: 14px; position: relative; background: #7ab3e0; box-shadow: inset 0 0 0 3px #fff; }
.weather.night { background: #1b2340; }
.weather span { position: absolute; inset: 12px; border-radius: 50%; background: #f9d613; }
.weather.night span { background: #f2f2d0; clip-path: circle(50% at 40% 50%); }
.weather-cloud span, .weather-rain span, .weather-thunder span, .weather-snow span { background: #eee; border-radius: 40% 40% 30% 30%; inset: 18px 10px 14px; }
.weather-rain::after, .weather-snow::after, .weather-thunder::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 6px; background: repeating-linear-gradient(90deg, #4a7fbf 0 2px, transparent 2px 6px); }
.weather-snow::after { background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 6px); }
.weather-thunder::after { background: #f9d613; clip-path: polygon(30% 0, 70% 0, 50% 100%); height: 10px; }
.statusline { display: flex; align-items: center; gap: 4px; padding: 8px 18px; font-weight: bold; color: #fff; background: #1f1f1f; border-bottom: 1px solid #000; }
.statusline .st { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-right: 1px solid #333; }
.statusline .st::before { content: ''; width: 16px; height: 16px; background-size: 16px 16px; background-repeat: no-repeat; background-position: center; }
.st-money::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%221%22 y=%224%22 width=%2214%22 height=%228%22 rx=%221%22 fill=%22%233a9a3a%22 stroke=%22%231f5c1f%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%222.2%22 fill=%22%23c9e6a5%22/%3E%3Crect x=%222.5%22 y=%225.5%22 width=%2211%22 height=%225%22 fill=%22none%22 stroke=%22%23c9e6a5%22 stroke-width=%220.6%22/%3E%3C/svg%3E"); } .st-beer::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%223%22 y=%224%22 width=%228%22 height=%2210%22 rx=%221%22 fill=%22%23f1ca27%22 stroke=%22%237a5a00%22/%3E%3Crect x=%2211%22 y=%226%22 width=%223%22 height=%225%22 rx=%221.5%22 fill=%22none%22 stroke=%22%237a5a00%22/%3E%3Crect x=%223%22 y=%222.5%22 width=%228%22 height=%222.5%22 rx=%221%22 fill=%22%23fff%22/%3E%3C/svg%3E"); } .st-book::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M3 2h9l2 2v10H3z%22 fill=%22%23e8dcc3%22 stroke=%22%237c6047%22/%3E%3Cpath d=%22M5 6h7M5 8.5h7M5 11h5%22 stroke=%22%237c6047%22 stroke-width=%220.9%22/%3E%3C/svg%3E"); } .st-fight::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M2 2l10 10M14 2L4 12%22 stroke=%22%23ddd%22 stroke-width=%222%22/%3E%3Cpath d=%22M11 13l2 2M3 13l2 2%22 stroke=%22%23b23a2e%22 stroke-width=%222%22/%3E%3C/svg%3E"); }
.st-bottle::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M6 1h4v3l1.5 2v9H4.5V6L6 4z%22 fill=%22%237bb661%22 stroke=%22%233d6b2c%22/%3E%3Crect x=%225.5%22 y=%229%22 width=%225%22 height=%223%22 fill=%22%23e8dcc3%22/%3E%3C/svg%3E"); } .st-clock::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%226.5%22 fill=%22%23ddd%22 stroke=%22%23555%22/%3E%3Cpath d=%22M8 4v4l3 2%22 stroke=%22%23222%22 stroke-width=%221.4%22 fill=%22none%22/%3E%3C/svg%3E"); } .st-clean::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M8 1.5C8 1.5 3 7 3 10a5 5 0 0 0 10 0c0-3-5-8.5-5-8.5z%22 fill=%22%236fb3ff%22 stroke=%22%232f6f9f%22/%3E%3Cpath d=%22M6 10a2 2 0 0 0 2 2%22 stroke=%22%23fff%22 fill=%22none%22/%3E%3C/svg%3E"); } .st-stamps::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%222%22 y=%222%22 width=%2212%22 height=%2212%22 fill=%22%23e6871f%22 stroke=%22%23fff%22 stroke-dasharray=%221.5 1.5%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%227%22 height=%227%22 fill=%22%23fff3dc%22/%3E%3C/svg%3E"); }
.statusline a { color: #fff; text-decoration: none; }
.statusline [data-ends] { font-variant-numeric: tabular-nums; color: #f7c46a; }
.statusline .xtra { margin-left: auto; }
.statusline .xtra a { color: var(--card); text-transform: uppercase; font-size: 10px; margin-left: 10px; }
.topband { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 16px 24px 0 70px; }
.topband .tabwrap { flex: 1; min-width: 0; }
.profilecard { width: 268px; flex: 0 0 268px; background: var(--card); color: var(--card-ink); padding: 10px 12px; display: flex; gap: 10px; clip-path: polygon(1% 0, 100% 2%, 99% 100%, 0 97%); box-shadow: 2px 3px 6px rgba(0,0,0,0.5); }
.profilecard .polaroid { flex: 0 0 80px; background: #fff; padding: 4px 4px 12px; box-shadow: 1px 1px 3px rgba(0,0,0,0.4); transform: rotate(-3deg); }
.profilecard .polaroid img { width: 72px; height: 96px; object-fit: cover; display: block; }
.profilecard h2 { font: bold 1.35em Georgia, serif; text-transform: uppercase; color: var(--card-ink); border-bottom: 1px solid var(--card-line); margin: 0 0 4px; padding-bottom: 2px; }
.profilecard .pc-text { font-size: 11px; line-height: 1.5; flex: 1; }
.profilecard .pc-text span { text-transform: uppercase; color: #5c4a35; font-weight: bold; }
.profilecard .pc-mail { display: block; text-transform: uppercase; font-weight: bold; color: #7a0d0d; margin-top: 4px; }
.tabnav { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tabnav a { background: var(--card); color: var(--card-ink); text-decoration: none; padding: 3px 14px; font-size: 11px; clip-path: polygon(3% 0, 97% 4%, 100% 100%, 0 92%); }
.tabnav a:hover { text-decoration: underline; color: #000; }
.tabnav a.active { font-weight: bold; background: #f4ecd9; }
.content { margin: 12px 0 0 55px; width: 878px; max-width: calc(100% - 55px); background: var(--paper); padding: 26px 25px 30px; border: 1px solid #222; box-shadow: 0 0 0 4px #333; position: relative; }
.content::before, .content::after { content: ''; position: absolute; left: -1px; right: -1px; height: 8px; background: repeating-linear-gradient(90deg, #f2e9d2 0 12px, transparent 12px 20px); opacity: 0.35; }
.content::before { top: -1px; } .content::after { bottom: -1px; }
.submenu { display: flex; flex-direction: column; gap: 10px; }
.submenu .paper { display: block; background: var(--card); color: var(--card-ink); font-weight: bold; text-decoration: none; padding: 10px 14px; text-align: center; box-shadow: 1px 2px 3px rgba(0,0,0,0.5); }
.submenu .paper-1 { clip-path: polygon(0 10%, 2% 0, 100% 4%, 98% 100%, 0 94%); transform: rotate(-1deg); }
.submenu .paper-2 { clip-path: polygon(2% 0, 100% 8%, 100% 100%, 0 96%); transform: rotate(0.8deg); }
.submenu .paper-3 { clip-path: polygon(0 0, 98% 3%, 100% 92%, 3% 100%); transform: rotate(-0.5deg); }
.submenu .paper-4 { clip-path: polygon(3% 5%, 100% 0, 97% 100%, 0 100%); transform: rotate(1.2deg); }
.submenu .paper-5 { clip-path: polygon(0 4%, 100% 0, 100% 96%, 2% 100%); transform: rotate(-1.4deg); }
.submenu .paper:hover { color: #141414; background: #f4ecd9; }
.submenu .paper.active { background: #f4ecd9; text-decoration: underline; }
.special { background: var(--card); color: var(--card-ink); padding: 12px 14px; margin-top: 16px; clip-path: polygon(0 2%, 100% 0, 98% 100%, 2% 98%); }
.special h3 { color: var(--card-ink); font-size: 15px; margin-top: 0; }
.sigcard { background: #222; border: 2px solid #111; padding: 8px 10px; width: 150px; text-align: center; box-shadow: 0 0 0 2px #555; }
.sigcard b { display: block; color: #f1ca27; font-family: Impact, sans-serif; font-size: 16px; letter-spacing: 1px; margin-bottom: 4px; }
.sigcard span { display: block; font-size: 11px; color: #ddd; }
.mood { font-weight: bold; }
.mood-bad, .promille-bad { color: var(--err); } .mood-mid, .promille-mid { color: var(--warn); } .mood-good, .promille-good { color: var(--ok); } .mood-warn, .promille-warn { color: #ff6800; }
.cleanrow { margin: 6px 0 10px; }
.gitem { display: flex; gap: 14px; align-items: stretch; background: #282828; border: 1px solid #1f1f1f; margin-bottom: 8px; padding: 10px; }
.gitem .pic { flex: 0 0 64px; height: 64px; background: #3b2a1a; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: bold 22px Impact, sans-serif; color: var(--card); }
.gitem .desc { flex: 1; }
.gitem .desc b { display: block; font-size: 13px; color: #fff; }
.gitem .card { flex: 0 0 150px; background: var(--card); color: var(--card-ink); padding: 8px 10px; font-size: 11px; clip-path: polygon(0 3%, 100% 0, 98% 100%, 2% 97%); }
.gitem .card b { display: block; font-size: 13px; }
.gitem .card form { margin-top: 6px; }
.gitem.locked { opacity: 0.55; }
.gitem.owned { border-color: var(--ok-line); }
.actioncard { background: #282828; border: 1px solid #1f1f1f; margin-bottom: 12px; }
.actioncard .head { background: #1c1c1c; padding: 6px 10px; font-weight: bold; color: #fff; }
.actioncard .body { padding: 10px; display: flex; gap: 14px; align-items: center; }
.actioncard .timer { font: bold 22px Georgia, serif; color: #fff; font-variant-numeric: tabular-nums; }
.district-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.district { background: #282828; border: 1px solid #1f1f1f; padding: 6px 8px; font-size: 11px; }
.district.current { border-color: #2f6f9f; background: #1d3a52; }
.district.owned { border-color: var(--ok-line); }
.district b { display: block; color: #fff; }
.district.held b::after { content: ' ★'; color: var(--warn); }
.fightlog { font-family: Consolas, "Courier New", monospace; font-size: 11px; background: #222; border: 1px solid #111; padding: 8px 10px; max-height: 360px; overflow: auto; }
.fightlog p { margin: 0 0 3px; }
tr.f-win td { background: #1f4a14 !important; } tr.f-loss td { background: #4a1414 !important; } tr.f-draw td { background: #4a4214 !important; }
.arrow-out::before { content: '➔ '; color: var(--ok); } .arrow-in::before { content: '➔ '; color: var(--err); display: inline-block; transform: scaleX(-1); }
.msg { background: #282828; border: 1px solid #1f1f1f; padding: 10px 12px; margin-bottom: 10px; }
.msg .meta { color: var(--ink-dim); font-size: 11px; margin-bottom: 4px; }
.msg.unread { border-left: 4px solid var(--accent); }
.msg .body { white-space: pre-wrap; }
.shoutbox { background: #222; border: 1px solid #111; padding: 8px 10px; max-height: 260px; overflow: auto; margin-bottom: 8px; }
.shoutbox p { margin: 0 0 4px; }
.shoutbox .who { color: #f1ca27; font-weight: bold; }
.shoutbox .when { color: #666; font-size: 10px; }
.online-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #666; margin-right: 4px; }
.online-dot.on { background: var(--ok); }
.pager { margin-top: 10px; }
.pager a, .pager span { display: inline-block; padding: 2px 7px; margin-right: 4px; background: #222; border: 1px solid #3b3b3b; text-decoration: none; }
.pager span.cur { background: #444; color: #fff; }
.chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; background: #222; border: 1px solid #111; padding: 4px; }
.chart span { flex: 1; background: linear-gradient(#5be05b, #189f00); min-width: 3px; }
.chart span.low { background: linear-gradient(#e0786d, #a90204); }
.awardlist li { margin-bottom: 6px; }
.awardlist b { color: #c9a7ff; }
.title-tag { color: #c9a7ff; font-size: 11px; }
.newsticker { background: #1c1c1c; color: #b3b3b3; padding: 4px 10px; margin-bottom: 12px; white-space: nowrap; overflow: hidden; font-size: 11px; }
.cityview { background: #1a1a1a; border: 1px solid #000; padding: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.cityview a { display: block; background: #2b2b2b; color: #fff; text-decoration: none; text-align: center; padding: 18px 6px 8px; border: 1px solid #444; font: bold 11px Arial, sans-serif; text-transform: uppercase; position: relative; }
.cityview a::before { content: ''; position: absolute; top: 6px; left: 50%; width: 10px; height: 6px; margin-left: -5px; background: #f1ca27; }
.cityview a:hover { background: #3a3a3a; border-color: #f1ca27; }
.cityview a small { display: block; font-weight: normal; text-transform: none; color: #aaa; }
.hs-search { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.hs-search input[type=text] { width: 120px; }
.hs-search input[type=number] { width: 70px; }
.errmsg { color: var(--err); font-weight: bold; } .goodmsg { color: var(--ok); font-weight: bold; }
.online-note { color: var(--ink-dim); font-size: 11px; }
@media (max-width: 1010px) {
  .frame { width: 100%; margin: 0; }
  .gamehead { height: auto; flex-wrap: wrap; clip-path: none; }
  .topband { flex-direction: column; align-items: stretch; padding: 10px; }
  .profilecard { width: auto; flex: none; clip-path: none; }
  .content { margin: 10px 0 0; width: 100%; max-width: 100%; }
  .cols { flex-direction: column; }
  .cols > *, .cols .cols > .gbox { flex: none; width: 100%; }
  .col-side { flex: none; width: 100%; }
  .district-list, .cityview { grid-template-columns: repeat(2, 1fr); }
  .start { grid-template-columns: 1fr; }
  .start .login-box { order: 1; }
  .start .teaser { order: 2; }
  .start .teaser ul { columns: 1; }
  .start .register .row { grid-template-columns: 1fr; }
  .formgrid { grid-template-columns: 1fr; }
  .statusline { flex-wrap: wrap; }
}
.ico-penner { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 34%22%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%2210%22 fill=%22%23e8dcc3%22/%3E%3Cpath d=%22M6 13q11-9 22 0l-1 3H7z%22 fill=%22%232b1c0c%22/%3E%3Cpath d=%22M4 15h27v2.5H4z%22 fill=%22%232b1c0c%22/%3E%3Ccircle cx=%2213.5%22 cy=%2219%22 r=%221.4%22 fill=%22%232b1c0c%22/%3E%3Ccircle cx=%2220.5%22 cy=%2219%22 r=%221.4%22 fill=%22%232b1c0c%22/%3E%3Cpath d=%22M9 22q8 12 16 0v6q-8 8-16 0z%22 fill=%22%232b1c0c%22/%3E%3Cpath d=%22M12 22h10%22 stroke=%22%23e8dcc3%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M31 6h4v4l1.5 2v18h-7V12L31 10z%22 fill=%22%237bb661%22 stroke=%22%232b1c0c%22/%3E%3Crect x=%2230.5%22 y=%2220%22 width=%226%22 height=%224%22 fill=%22%23e8dcc3%22/%3E%3C/svg%3E") !important; }
.ico-mail { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 34%22%3E%3Crect x=%223%22 y=%227%22 width=%2234%22 height=%2222%22 rx=%222%22 fill=%22%23e8dcc3%22/%3E%3Cpath d=%22M3 9l17 12 17-12%22 fill=%22none%22 stroke=%22%232b1c0c%22 stroke-width=%222%22/%3E%3Cpath d=%22M28 2l6 4-6 4M12 32l-6-4 6-4%22 fill=%22none%22 stroke=%22%23e8dcc3%22 stroke-width=%222%22/%3E%3C/svg%3E") !important; }
.ico-gang { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 34%22%3E%3Ccircle cx=%2211%22 cy=%2210%22 r=%225%22 fill=%22%23e8dcc3%22/%3E%3Ccircle cx=%2229%22 cy=%2210%22 r=%225%22 fill=%22%23e8dcc3%22/%3E%3Ccircle cx=%2220%22 cy=%228%22 r=%225.5%22 fill=%22%23e8dcc3%22/%3E%3Cpath d=%22M2 32v-8q0-6 9-6t9 6v8zM20 32v-8q0-6 9-6t9 6v8z%22 fill=%22%23e8dcc3%22/%3E%3Cpath d=%22M11 32v-10q0-7 9-7t9 7v10z%22 fill=%22%23e8dcc3%22 stroke=%22%232b1c0c%22 stroke-width=%221.5%22/%3E%3C/svg%3E") !important; }
.ico-city { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 34%22%3E%3Cpath d=%22M2 32V18h6v-6h6V6l6-4 6 4v6h6v6h6v14z%22 fill=%22%23e8dcc3%22/%3E%3Crect x=%2218%22 y=%2222%22 width=%224%22 height=%2210%22 fill=%22%232b1c0c%22/%3E%3Cpath d=%22M9 22h3v3H9zM28 22h3v3h-3zM16 12h3v3h-3zM21 12h3v3h-3z%22 fill=%22%232b1c0c%22/%3E%3Cpath d=%22M20 2v-1%22 stroke=%22%232b1c0c%22/%3E%3C/svg%3E") !important; }
.ico-news { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 34%22%3E%3Crect x=%223%22 y=%225%22 width=%2230%22 height=%2226%22 rx=%221%22 fill=%22%23e8dcc3%22/%3E%3Cpath d=%22M7 10h12M7 14h22M7 18h22M7 22h14%22 stroke=%22%232b1c0c%22 stroke-width=%221.6%22/%3E%3Crect x=%2221%22 y=%229%22 width=%228%22 height=%223%22 fill=%22%232b1c0c%22/%3E%3Ccircle cx=%2229%22 cy=%2224%22 r=%225%22 fill=%22none%22 stroke=%22%232b1c0c%22 stroke-width=%222.5%22/%3E%3Cpath d=%22M33 28l5 5%22 stroke=%22%232b1c0c%22 stroke-width=%223%22/%3E%3C/svg%3E") !important; }