:root { --paper: #f4ecd2; --paper2: #ebe0bd; --line: #b9a56f; --text: #2b2414; --dim: #7a6e50; --green: #5a8a1f; --brown: #5b3d1a; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Verdana, Tahoma, system-ui, sans-serif; font-size: 14px; color: var(--text); background: #8d7a4a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%238d7a4a'/%3E%3Crect width='4' height='4' fill='%23867344'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23867344'/%3E%3C/svg%3E"); }
a { color: #f4e6b0; }
.hidden { display: none !important; }
svg { width: 24px; height: 24px; vertical-align: middle; flex: none; }
button, select, input { font: inherit; }
button { background: linear-gradient(#8cc43a, #5a8a1f); color: #fff; text-shadow: 0 1px 0 #0005; border: 1px solid #3f6314; border-radius: 4px; padding: 5px 12px; cursor: pointer; font-weight: 700; }
button:hover { filter: brightness(1.08); }
button.secondary { background: linear-gradient(#e8dcb0, #c4b27a); color: var(--text); text-shadow: none; border-color: var(--line); }
button.link { background: none; border: 0; color: #2d6a9f; text-shadow: none; padding: 0 4px; font-weight: 400; text-decoration: underline; }
button:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.6); }
input, select { background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; }
input[type=number] { width: 80px; }

/* header */
.tv-top { display: flex; align-items: center; gap: 18px; padding: 0 16px; background: linear-gradient(#3a2a14, #24190a); border-bottom: 3px solid #b8902c; min-height: 62px; flex-wrap: wrap; }
.logo { color: #f0c860; font-size: 1.4rem; letter-spacing: 1px; text-shadow: 0 2px 2px #000a; }
.tabs { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.tabs button { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 72px; padding: 4px 8px 3px; background: radial-gradient(#6b4d24, #3d2a12); border: 2px solid #b8902c; border-radius: 8px; color: #f4e6b0; text-shadow: none; font-weight: 400; font-size: .72rem; position: relative; }
.tabs button svg { width: 28px; height: 28px; }
.tabs button.active { background: radial-gradient(#9acd4a, #5a8a1f); color: #fff; border-color: #f0c860; }
.badge { position: absolute; top: -6px; right: -6px; background: #d33; color: #fff; border-radius: 10px; padding: 0 6px; font-size: .75rem; border: 1px solid #fff; }
.top-right { display: flex; gap: 12px; align-items: center; }
body.anon .tabs { visibility: hidden; }

/* resource bar */
.res-bar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 8px; background: linear-gradient(#5b4220, #3a2a14); border-bottom: 2px solid #b8902c; }
.res { display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 6px; background: linear-gradient(#f9f2d8, #e6d9ab); border: 2px solid #8c6f2c; border-radius: 18px; min-width: 150px; }
.res svg { width: 30px; height: 30px; }
.res .val { display: flex; flex-direction: column; line-height: 1.15; }
.res .val b { font-size: 1rem; } .res .val small { color: var(--dim); font-size: .72rem; }
.res.full b { color: #c0300f; } .neg { color: #c0300f; }
.res .bar-mini { height: 5px; background: #cdbf8a; border-radius: 3px; margin-top: 2px; overflow: hidden; } .res .bar-mini i { display: block; height: 100%; background: #6fa83a; }
.res.full .bar-mini i { background: #d33; }

.msg { min-height: 1.2em; padding: 4px 16px; text-align: center; color: #fff; } .msg.bad { color: #ffb3a0; } .msg.good { color: #c8f5a0; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; max-width: 1180px; margin: 0 auto; padding: 8px 14px 30px; align-items: start; }
.content { background: var(--paper); border: 3px solid #5b3d1a; border-radius: 6px; box-shadow: 0 3px 10px #0007; padding: 12px; min-width: 0; }
.content h2 { margin: 4px 0 10px; font-family: Georgia, serif; color: var(--brown); border-bottom: 2px solid var(--line); padding-bottom: 4px; }
.content h2 small { font-weight: 400; color: var(--dim); }
.tv-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; color: var(--dim); }
.tv-card { background: var(--paper); border: 2px solid var(--line); border-radius: 6px; padding: 12px; margin: 10px 0; }
.auth { max-width: 420px; margin: 40px auto; display: grid; gap: 10px; }

/* sidebar boxes */
#sideInfo { display: grid; gap: 12px; }
.sbox { background: var(--paper); border: 3px solid #5b3d1a; border-radius: 6px; box-shadow: 0 3px 8px #0007; overflow: hidden; }
.sbox h3 { margin: 0; padding: 5px 10px; background: linear-gradient(#7a5726, #5b3d1a); color: #f4e6b0; font-size: .85rem; font-family: Georgia, serif; }
.sbox .body { padding: 6px 10px; }
.vlist button { display: flex; justify-content: space-between; width: 100%; background: none; border: 0; border-bottom: 1px dotted var(--line); color: var(--text); text-shadow: none; font-weight: 400; border-radius: 0; padding: 4px 2px; }
.vlist button.cur { font-weight: 700; color: var(--green); }
.row { padding: 4px 0; border-bottom: 1px dotted var(--line); font-size: .85rem; } .row.enemy { color: #b8341f; font-weight: 700; }
.dim { color: var(--dim); }
.timer { font-variant-numeric: tabular-nums; color: #a85a00; font-weight: 700; }
.cost { display: inline-flex; align-items: center; gap: 2px; margin-right: 8px; white-space: nowrap; } .cost svg { width: 18px; height: 18px; }

/* village views */
.landscape { position: relative; margin: 0 auto; border: 4px solid #4a7a1f; box-shadow: inset 0 0 50px #0005, 0 3px 8px #0004; overflow: hidden; background:
  radial-gradient(circle at 12% 18%, #4f8a2a 0 6%, transparent 6.5%), radial-gradient(circle at 88% 20%, #4f8a2a 0 7%, transparent 7.5%), radial-gradient(circle at 10% 84%, #4f8a2a 0 6%, transparent 6.5%), radial-gradient(circle at 90% 86%, #4f8a2a 0 7%, transparent 7.5%),
  radial-gradient(ellipse at center, #c9e08a 0%, #9cc85a 50%, #6aa63a 100%); }
.fieldsbox { width: 640px; height: 470px; max-width: 100%; border-radius: 16px; }
.centerbox { width: 580px; height: 580px; max-width: 100%; border-radius: 16px; background: radial-gradient(circle at center, #d6c18a 0 26%, #c8b378 27% 52%, #6aa63a 53% 100%); }
.centerbox::after { content: ""; position: absolute; inset: 14px; border: 3px dashed #fff5; border-radius: 50%; pointer-events: none; }
.cap { position: absolute; font-size: .72rem; width: 70px; text-align: center; color: #fff; text-shadow: 0 1px 2px #000; }
.centerbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 112px; height: 112px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(#f1e2b0, #b79e5a); color: #3b3015; border: 3px solid #7a6330; text-shadow: none; }
.centerbtn svg { width: 46px; height: 46px; } .centerbtn span { font-size: .7rem; }
.slot { position: absolute; width: 56px; height: 56px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid #fffd; box-shadow: 0 3px 5px #0006; }
.slot svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 1px #0008); }
.slot:hover { transform: scale(1.12); }
.slot.f-wood { background: radial-gradient(#8fbf5a, #3f6b22); } .slot.f-clay { background: radial-gradient(#e49a6a, #9a4f2a); }
.slot.f-iron { background: radial-gradient(#c9d0d8, #6c7782); } .slot.f-crop { background: radial-gradient(#f4dc6a, #b8942a); }
.slot[class*="b-"] { background: radial-gradient(#f1e5bd, #a98f55); }
.slot.empty { background: #fff3; border: 3px dashed #fffb; color: #fff; box-shadow: none; font-size: 1.6rem; }
.slot.building { outline: 3px solid #ff9f1a; }
.lvl { position: absolute; right: -8px; bottom: -8px; min-width: 24px; height: 24px; line-height: 20px; border-radius: 12px; background: #f9f2d8; color: #3b3015; border: 2px solid #5b3d1a; font: 700 .8rem Verdana; font-style: normal; text-align: center; padding: 0 3px; text-shadow: none; }
.lvl.new { background: #f0c860; color: #3b3015; }
.lvl.up { background: #ffb347; } .lvl.max { background: #9bd05a; }

.panel { position: relative; background: #fffaf0; border: 2px solid var(--line); border-radius: 6px; padding: 10px; margin-top: 12px; }
.panel .close { position: absolute; right: 8px; top: 8px; }
.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.option { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px; } .option.locked { opacity: .65; } .option p { margin: 4px 0; color: var(--dim); font-size: .8rem; }
.option.adv.hard { border-color: #c0452a; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.info-grid h4 { margin: 0 0 4px; font-family: Georgia, serif; color: var(--brown); border-bottom: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; } td, th { padding: 4px 8px; border-bottom: 1px solid #d8cca4; text-align: left; } th { background: var(--paper2); } tr.me { color: var(--green); font-weight: 700; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.units { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 8px; } .unit { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
form label { margin-right: 8px; } .trade { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* map */
.maplayout { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.map { display: inline-block; border: 3px solid #5b3d1a; } .maprow { display: flex; }
.tile { width: 40px; height: 40px; padding: 0; border-radius: 0; border: 1px solid #0003; background: #7db044; display: flex; align-items: center; justify-content: center; }
.tile svg { width: 26px; height: 26px; } .tile.oasis { background: #4fb0a8; } .tile.mine { background: #f0c030; } .tile.foe { background: #d4583a; } .tile.sel { outline: 3px solid #fff; outline-offset: -3px; }
.mapnav { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
#tileInfo { margin: 0; min-width: 220px; max-width: 320px; }
#world { margin-top: 12px; max-width: 100%; image-rendering: pixelated; border: 2px solid #5b3d1a; }
.report { background: #fffaf0; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; } .report.unread summary { font-weight: 700; }
.social-card { max-width: 760px; }
.social-controls, .social-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.social-form { margin: 10px 0 0; }
.social-form input { flex: 1; min-width: 180px; }
.social-messages { height: min(55vh, 520px); min-height: 180px; overflow-y: auto; background: #fffaf0; border: 1px solid var(--line); border-radius: 4px; padding: 8px; }
.social-message { padding: 7px 9px; margin-bottom: 6px; background: #f4ecd2; border: 1px solid #d8cca4; border-radius: 4px; overflow-wrap: anywhere; }
.social-message.mine { margin-left: 10%; background: #e6edcf; }
.social-message > div { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; }
.social-message time { color: var(--dim); font-weight: 400; }
.social-message p { margin: 5px 0 0; white-space: pre-wrap; }
pre { white-space: pre-wrap; }

/* hero */
.herocard { margin-left: 0; text-align: center; }
.portrait { width: 110px; height: 110px; margin: 0 auto 6px; border-radius: 50%; background: radial-gradient(#f1e2b0, #b79e5a); border: 4px solid #7a6330; display: flex; align-items: center; justify-content: center; } .portrait svg { width: 70px; height: 70px; }
.bar { position: relative; height: 22px; background: #cfc39b; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin: 6px 0; } .bar .fill { position: absolute; inset: 0 auto 0 0; }
.bar .fill.hp { background: linear-gradient(#e86a5a, #b8341f); } .bar .fill.xp { background: linear-gradient(#6fb0e8, #2d6a9f); }
.bar span { position: relative; font-size: .8rem; line-height: 22px; color: #fff; text-shadow: 0 1px 2px #000a; }
.attr { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; border-bottom: 1px dotted var(--line); text-align: left; } .attr button { padding: 0 9px; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .fieldsbox, .centerbox { transform: scale(.58); transform-origin: top left; margin-bottom: -210px; margin-left: 0; }
  .tile { width: 22px; height: 22px; } .tile svg { width: 16px; height: 16px; }
}