/* BURH's interface stays outside the canvas for legible type, keyboard focus and touch targets. */
:root{
  font-family:Arial,Helvetica,sans-serif;
  color:#28392f;
  background:#d7d8bd;
  font-synthesis:none;
  --ink:#28392f;
  --muted:#77775f;
  --paper:#f2eedc;
  --gold:#d1b773;
  --line:rgba(74,77,53,.18);
  --dark:#273e35
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  overflow:hidden;
  overscroll-behavior:none
}
button{
  font:inherit;
  cursor:pointer;
  border:1px solid var(--line);
  color:var(--ink);
  background:rgba(245,240,222,.94);
  border-radius:5px;
  transition:background .15s,transform .15s
}
button:hover:not(:disabled){
  background:#fff7dd
}
button:active:not(:disabled){
  transform:translateY(1px)
}
button:disabled{
  opacity:.42;
  cursor:not-allowed
}
button:focus-visible,canvas:focus-visible{
  outline:3px solid #bc8c38;
  outline-offset:3px
}
[hidden]{
  display:none!important
}
#world{
  width:100vw;
  height:100dvh;
  display:block;
  touch-action:none;
  outline:none
}
.vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 160px rgba(66,66,37,.17)
}
.topbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:96px;
  padding:21px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  background:linear-gradient(#f4efde 30%,rgba(244,239,222,.94) 78%,rgba(244,239,222,0));
  pointer-events:none
}
.identity,.resources,.seasons{
  pointer-events:auto
}
.identity{
  display:flex;
  align-items:center;
  gap:20px;
  min-width:230px
}
.wordmark{
  font:38px/1 Georgia,'Times New Roman',serif;
  letter-spacing:6px;
  font-weight:bold
}
.brand-mark{
  font-size:17px;
  vertical-align:middle;
  letter-spacing:0;
  color:#aa8c49;
  display:none
}
.settlement{
  font-size:10px;
  letter-spacing:2px;
  border-left:1px solid var(--line);
  padding-left:20px;
  line-height:1.6
}
.settlement span{
  display:block;
  color:#8e8e71;
  font-size:9px;
  letter-spacing:3px
}
.resources{
  display:flex;
  gap:28px;
  align-items:center
}
.resources>div{
  min-width:60px
}
.resource-label{
  display:block;
  font-size:9px;
  letter-spacing:1.5px;
  color:#777b62;
  margin-bottom:5px
}
.resources strong{
  font:26px/1 Georgia,serif;
  display:flex;
  gap:7px;
  align-items:center
}
.coin{
  display:inline-block;
  width:16px;
  height:16px;
  border:2px solid #af9858;
  border-radius:50%;
  box-shadow:inset 0 0 0 2px #e7d9a8;
  background:#cdb879
}
.shield-glyph{
  font-size:19px;
  color:#587465
}
.seasons{
  display:flex;
  gap:23px;
  text-align:center
}
.season{
  opacity:.4;
  min-width:45px
}
.season.current{
  opacity:1
}
.season-name{
  font:12px Georgia,serif;
  letter-spacing:.7px
}
.season-dots{
  display:flex;
  justify-content:center;
  gap:5px;
  margin-top:8px
}
.season-dot{
  width:5px;
  height:5px;
  border:1px solid #777e5d;
  border-radius:50%
}
.season-dot.done{
  background:#6b7c54
}
.season-dot.active{
  background:#ba8a42;
  border-color:#ba8a42;
  box-shadow:0 0 0 3px #c8af7040
}
.raid-card{
  position:fixed;
  top:112px;
  left:30px;
  width:280px;
  padding:17px 20px;
  background:rgba(245,241,225,.9);
  border:1px solid rgba(110,105,73,.2);
  box-shadow:0 4px 25px #44421d0c;
  border-radius:3px;
  backdrop-filter:blur(8px)
}
.eyebrow{
  font-size:9px;
  font-weight:bold;
  letter-spacing:1.8px;
  color:#7a8164
}
.raid-card h1{
  font:23px/1.12 Georgia,serif;
  font-weight:normal;
  margin:11px 0
}
.threat-line{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  color:#86523c
}
.threat-dot{
  display:inline-block;
  height:5px;
  width:5px;
  background:#a35f43;
  border-radius:50%
}
.raid-card p{
  font-size:11px;
  line-height:1.65;
  color:#777866;
  margin:12px 0 14px
}
.hall-health{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:8px;
  letter-spacing:.7px;
  padding-top:12px;
  border-top:1px solid var(--line)
}
.health-track{
  height:3px;
  flex:1;
  background:#d9d7bf
}
.health-track>div{
  height:100%;
  background:#788954;
  transition:width .2s
}
.camera-tools{
  position:fixed;
  right:25px;
  top:112px;
  display:flex;
  gap:5px
}
.camera-tools button{
  height:34px;
  width:34px;
  font-size:20px;
  box-shadow:0 2px 8px #30302209
}
.camera-tools button[aria-pressed=true]{
  background:#dbc691
}
.notification{
  position:fixed;
  top:109px;
  left:50%;
  transform:translateX(-50%);
  background:var(--dark);
  color:#eee6cb;
  border:1px solid #637756;
  padding:13px 22px;
  border-radius:4px;
  font-size:12px;
  text-align:center;
  box-shadow:0 4px 30px #29392b26;
  max-width:460px;
  pointer-events:none;
  z-index:4
}
.welcome-note{
  position:fixed;
  left:33px;
  bottom:216px;
  max-width:300px;
  padding:19px 24px 17px 18px;
  border-left:2px solid #9b8d59;
  background:linear-gradient(90deg,#f0ecdba8,#f0ecdb00)
}
.welcome-note h2{
  font:25px Georgia,serif;
  margin:10px 0
}
.welcome-note p{
  font-size:12px;
  line-height:1.8;
  color:#626d52
}
.text-button{
  border:0;
  background:none!important;
  font-size:11px;
  padding:5px 0;
  border-radius:0
}
.text-button span{
  margin-left:16px
}
.text-button:hover{
  text-decoration:underline
}
.selection-card{
  position:fixed;
  right:27px;
  top:163px;
  width:267px;
  padding:20px;
  background:#f2eedceF;
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 5px 25px #38443010;
  backdrop-filter:blur(8px)
}
.selection-card h2{
  font:24px Georgia,serif;
  margin:0 0 9px
}
.selection-card p{
  font-size:11px;
  line-height:1.75;
  color:#757860
}
.selection-card .selection-meta{
  font-size:10px;
  color:#6d795c;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
  margin-bottom:12px
}
.selection-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.selection-actions button{
  padding:9px 10px;
  font-size:10px
}
.selection-actions .sell{
  margin-top:8px;
  color:#92563e;
  border:0;
  padding-left:0;
  background:transparent
}
.placement-tools{
  position:fixed;
  bottom:201px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  background:#f3eddbef;
  padding:9px 10px 9px 16px;
  border:1px solid var(--line);
  border-radius:5px;
  box-shadow:0 4px 25px #363c2420;
  max-width:calc(100% - 35px);
  font-size:11px;
  white-space:nowrap
}
.placement-tools button{
  padding:9px 11px;
  font-size:11px
}
#placement-label{
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis
}
.primary-small{
  background:#354e3d!important;
  color:#f1ead3!important;
  border:1px solid #263d2c;
  padding:11px 18px
}
.primary-small:hover{
  background:#466149!important
}
.bottom-interface{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  padding:0 26px 12px;
  background:linear-gradient(transparent,#eae6d2ed 25%,#ece8d7 75%);
  pointer-events:none
}
.bottom-interface button,.building-dock,.command-dock{
  pointer-events:auto
}
.toolbar-caption{
  height:32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:8px;
  letter-spacing:1.25px;
  color:#6e735e;
  padding:0 6px
}
.desktop-hint{
  opacity:.75
}
.bottom-row{
  display:flex;
  gap:14px;
  align-items:stretch
}
.building-dock{
  display:flex;
  gap:7px;
  flex:1;
  padding:8px;
  background:#eeead8d9;
  border:1px solid var(--line);
  border-radius:7px;
  box-shadow:0 5px 18px #303b2812;
  min-width:0
}
.build-button{
  position:relative;
  flex:1;
  min-width:80px;
  max-width:140px;
  height:103px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#f5f0de;
  border:1px solid #9c9c7b40;
  border-radius:4px
}
.build-button.selected{
  background:#ddd7b5;
  border-color:#8c945d;
  box-shadow:inset 0 0 0 1px #8c945d
}
.build-button svg{
  width:35px;
  height:35px;
  stroke:#626d50;
  stroke-width:1.35;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}
.build-button .building-name{
  font:12px Georgia,serif
}
.build-button .building-cost{
  font-size:10px;
  color:#897c51;
  display:flex;
  align-items:center;
  gap:5px
}
.build-button .coin{
  height:9px;
  width:9px;
  border-width:1px;
  box-shadow:none
}
.build-button .shortcut{
  position:absolute;
  top:6px;
  left:7px;
  font-size:8px;
  color:#929276
}
.command-dock{
  width:245px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:7px
}
.battle-controls{
  display:flex;
  gap:6px;
  height:36px
}
.battle-controls button{
  flex:1;
  font-size:13px;
  background:#f1ecd9
}
.battle-controls button.selected{
  background:#d5d0ad;
  border-color:#818a5c
}
.battle-controls #rally-button{
  flex:2
}
.horn-button{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 19px;
  background:var(--dark);
  color:#f5ecd2;
  border:1px solid #334b35;
  border-radius:5px;
  box-shadow:0 5px 12px #2c3b2720;
  text-align:left
}
.horn-button:hover:not(:disabled){
  background:#37523f
}
.horn-button strong{
  display:block;
  font:18px Georgia,serif;
  font-weight:normal
}
.horn-button small{
  display:block;
  letter-spacing:1.1px;
  color:#b9c6a4;
  font-size:8px;
  margin-top:7px
}
.horn-symbol{
  font-size:26px;
  transform:rotate(-30deg);
  color:#d5bd7a
}
.horn-button:disabled{
  opacity:.8
}
.build-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:30px;
  font-size:8px;
  letter-spacing:1.1px;
  color:#7b7e68
}
.build-footer b{
  font-weight:normal;
  color:#a49367;
  margin-left:6px
}
.build-footer .text-button{
  font-size:9px;
  color:#6c735c
}
.build-footer #season-note{
  letter-spacing:.4px
}
dialog{
  border:1px solid #9f9f7d;
  background:#f3eedb;
  border-radius:6px;
  max-width:550px;
  width:calc(100% - 35px);
  padding:35px;
  color:#2d4032;
  box-shadow:0 24px 100px #16201650
}
dialog::backdrop{
  background:#22362677;
  backdrop-filter:blur(3px)
}
dialog h2{
  font:37px/1.1 Georgia,serif;
  margin:14px 0 22px
}
dialog p{
  font-size:13px;
  line-height:1.8;
  color:#657056
}
dialog p b{
  color:#374d39
}
.dialog-close{
  position:absolute;
  right:14px;
  top:14px;
  border:0;
  background:none;
  font-size:18px
}
.help-footer{
  font-size:10px;
  line-height:1.9;
  color:#828570;
  border-top:1px solid var(--line);
  padding:15px 0
}
.result-actions{
  display:flex;
  gap:10px;
  margin-top:24px
}
.result-actions button{
  padding:12px 15px;
  font-size:12px
}
#fatal-error{
  position:fixed;
  inset:20%;
  padding:30px;
  background:#f4edd9;
  border:1px solid #9e6f4e;
  font:18px/1.6 Georgia,serif;
  z-index:20
}
/* Narrow screens retain the same game and tap targets, not a text-only substitute. */
@media(max-width:1100px){
  .identity{
    min-width:180px;
    gap:12px
  }
  .settlement{
    padding-left:12px
  }
  .resources{
    gap:16px
  }
  .seasons{
    gap:14px
  }
  .building-dock{
    overflow-x:auto;
    scrollbar-width:thin
  }
  .build-button{
    min-width:77px
  }
  .command-dock{
    width:214px
  }
  .horn-button{
    padding:14px
  }
  .horn-button strong{
    font-size:17px
  }
  .desktop-hint{
    display:none
  }
  .welcome-note{
    bottom:210px
  }
  .topbar{
    gap:12px;
    padding:20px
  }
  .raid-card{
    left:20px
  }
  .bottom-interface{
    padding-left:15px;
    padding-right:15px
  }
}
@media(max-width:760px){
  .topbar{
    height:89px;
    padding:14px 14px 24px;
    align-items:flex-start
  }
  .identity{
    min-width:0
  }
  .wordmark{
    font-size:30px;
    letter-spacing:4px
  }
  .settlement{
    display:none
  }
  .resources{
    gap:16px
  }
  .resources strong{
    font-size:22px
  }
  .resource-label{
    font-size:7px;
    letter-spacing:1px
  }
  .resources>div{
    min-width:43px
  }
  .income-resource{
    display:none
  }
  .seasons{
    position:fixed;
    left:14px;
    top:59px;
    gap:14px
  }
  .season{
    min-width:35px
  }
  .season-name{
    font-size:10px
  }
  .season-dots{
    margin-top:4px
  }
  .season-dot{
    width:4px;
    height:4px
  }
  .raid-card{
    top:100px;
    left:14px;
    width:225px;
    padding:12px 14px
  }
  .raid-card h1{
    font-size:20px;
    margin:8px 0
  }
  .raid-card .eyebrow{
    font-size:7px
  }
  .raid-card p{
    display:none
  }
  .threat-line{
    font-size:10px
  }
  .hall-health{
    padding-top:9px;
    margin-top:12px
  }
  .camera-tools{
    right:12px;
    top:99px;
    display:grid;
    grid-template-columns:30px 30px;
    gap:4px
  }
  .camera-tools button{
    width:30px;
    height:30px;
    font-size:18px
  }
  .camera-tools #home-camera{
    display:none
  }
  .welcome-note{
    left:17px;
    bottom:232px;
    padding:12px 16px;
    background:#f0ecdbaa;
    max-width:270px
  }
  .welcome-note h2{
    font-size:21px
  }
  .welcome-note p{
    font-size:11px;
    line-height:1.6;
    margin-bottom:7px
  }
  .welcome-note .eyebrow{
    font-size:7px
  }
  .bottom-interface{
    padding:0 10px max(5px,env(safe-area-inset-bottom));
    background:linear-gradient(transparent,#eae6d2f5 15%,#ece8d7 70%)
  }
  .toolbar-caption{
    height:23px;
    font-size:7px;
    padding:0 2px
  }
  .bottom-row{
    flex-direction:column;
    gap:6px
  }
  .building-dock{
    padding:5px;
    gap:5px
  }
  .build-button{
    min-width:73px;
    height:77px;
    gap:3px
  }
  .build-button svg{
    width:26px;
    height:26px
  }
  .build-button .building-name{
    font-size:11px
  }
  .build-button .shortcut{
    display:none
  }
  .build-button .building-cost{
    font-size:9px
  }
  .command-dock{
    width:100%;
    height:55px;
    flex-direction:row;
    gap:8px
  }
  .battle-controls{
    height:55px;
    width:140px;
    gap:4px
  }
  .battle-controls button{
    font-size:13px;
    min-width:34px
  }
  .battle-controls #rally-button{
    flex:1.4
  }
  .battle-controls #rally-button span{
    display:none
  }
  .horn-button{
    padding:9px 13px;
    gap:10px
  }
  .horn-button strong{
    font-size:17px
  }
  .horn-button small{
    font-size:7px;
    margin-top:4px
  }
  .horn-symbol{
    font-size:20px
  }
  .build-footer{
    height:21px;
    font-size:6px;
    letter-spacing:.6px
  }
  .build-footer #season-note{
    font-size:7px;
    max-width:200px;
    text-align:center
  }
  .build-footer .text-button{
    font-size:8px
  }
  .selection-card{
    top:auto;
    right:14px;
    bottom:220px;
    width:250px;
    padding:14px;
    max-height:255px;
    overflow:auto
  }
  .selection-card h2{
    font-size:21px
  }
  .selection-card p{
    margin:6px 0 10px;
    font-size:10px
  }
  .selection-card .selection-meta{
    padding-bottom:8px;
    margin-bottom:8px
  }
  .placement-tools{
    bottom:220px;
    max-width:calc(100% - 20px);
    gap:5px;
    padding:7px;
    flex-wrap:wrap;
    justify-content:center;
    width:max-content
  }
  .placement-tools #placement-label{
    width:100%;
    text-align:center;
    font-size:10px;
    max-width:280px
  }
  .placement-tools button{
    padding:9px 12px;
    min-height:35px
  }
  .notification{
    top:205px;
    font-size:11px;
    max-width:calc(100% - 35px);
    width:max-content;
    padding:11px 15px
  }
  dialog{
    padding:26px;
    max-height:85dvh
  }
  dialog h2{
    font-size:30px
  }
  dialog p{
    font-size:12px
  }
  .help-footer{
    font-size:9px
  }
  #fatal-error{
    inset:15%;
    font-size:15px
  }
}
@media(max-height:570px) and (min-width:761px){
  .topbar{
    height:75px;
    padding-top:12px
  }
  .raid-card{
    top:80px;
    padding:12px 16px;
    width:255px
  }
  .raid-card p{
    display:none
  }
  .camera-tools{
    top:85px
  }
  .welcome-note{
    display:none
  }
  .build-button{
    height:78px
  }
  .build-button svg{
    width:26px;
    height:26px
  }
  .placement-tools{
    bottom:163px
  }
  .selection-card{
    top:130px;
    padding:12px
  }
  .bottom-interface{
    padding-bottom:4px
  }
  .notification{
    top:85px
  }
  .horn-button{
    padding:9px 14px
  }
  .toolbar-caption{
    height:25px
  }
}
@media(prefers-reduced-motion:reduce){
  button,.health-track>div{
    transition:none
  }
  .vignette{
    box-shadow:none
  }
}

/* Opt-in diagnostics only; never displayed during ordinary play. */
.performance-overlay {
  position: fixed;
  right: 12px;
  top: 150px;
  z-index: 50;
  margin: 0;
  padding: 10px 12px;
  background: rgba(20, 33, 29, 0.9);
  color: #f4eedb;
  border: 1px solid rgba(220, 204, 157, 0.4);
  font: 12px/1.5 monospace;
  pointer-events: none;
}