/* Wayward: bark, hide and ochre */
:root {
  --hide: rgba(52, 36, 22, 0.86);
  --edge: #8a6a42;
  --ochre: #e0b26a;
  --bone: #f3e6cc;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05070d; color: var(--bone);
  font: 15px/1.35 Georgia, 'Times New Roman', serif; user-select: none; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#game { cursor: crosshair; }
#game.placing { cursor: cell; }
#tip.info { color: var(--bone); border-color: var(--edge); background: var(--hide); }
#tip { position: fixed; display: none; pointer-events: none; padding: 2px 8px; border-radius: 5px; font-size: 13px;
  background: rgba(40, 20, 12, 0.85); color: #ffc9b0; border: 1px solid #a4553a; }
#box { position: fixed; display: none; border: 1px solid var(--bone); background: rgba(243, 230, 204, 0.12); pointer-events: none; }

.panel { position: fixed; background: var(--hide); border: 2px solid var(--edge); border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); }

header { top: 14px; left: 14px; padding: 6px 14px 8px; display: flex; align-items: baseline; gap: 12px; }
h1 { margin: 0; font-size: 26px; letter-spacing: 0.12em; color: var(--ochre); font-variant: small-caps; }
#seed { opacity: 0.6; font-size: 13px; }
#mute { padding: 0 6px; font-size: 15px; background: none; border: none; }
#pause, #speed { padding: 0 7px; font-size: 13px; min-width: 30px; }
#sound { top: 70px; left: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; width: 320px; }
#sound.shut { display: none; }
#sound label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; white-space: nowrap; }
#sound input { width: 120px; accent-color: var(--ochre); }
#sound-off { margin-bottom: 4px; }
#paused { padding: 4px 18px; border-radius: 8px;
  background: rgba(224, 178, 106, 0.92); color: #2b1c0f; font-size: 15px; letter-spacing: 0.05em; pointer-events: none; }
#paused.shut { display: none; }

#help { top: 14px; right: 14px; padding: 8px 12px 8px; max-width: 300px; z-index: 2; }
#minimap { inset: 56px 14px auto auto; width: 196px; height: 196px; box-sizing: content-box;
  border-radius: 50%; padding: 0; cursor: pointer; }
#help dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 26px 0 0; font-size: 13px; }
#help dt { color: var(--ochre); white-space: nowrap; }
#help dd { margin: 0; }
#help.shut dl { display: none; }
#help.shut { padding: 4px; }
#help-toggle { position: absolute; top: 5px; right: 6px; padding: 2px 10px; font-size: 13px; }
#help.shut #help-toggle { position: static; }

#tools { bottom: 14px; left: 50%; transform: translateX(-50%); padding: 8px; display: flex; gap: 8px; align-items: center; }
#tools .gap { width: 1px; align-self: stretch; background: var(--edge); margin: 0 4px; }
#tools small { opacity: 0.75; }
#tools > button { white-space: nowrap; }

#tribe { top: 14px; left: 50%; transform: translateX(-50%); padding: 7px 16px; display: flex; gap: 20px; align-items: center; }
#tribe b { color: var(--ochre); font-weight: normal; }
.mana { display: flex; align-items: center; gap: 8px; }
.mana .bar { width: 160px; height: 12px; border-radius: 6px; background: #1d140c; border: 1px solid var(--edge); overflow: hidden; }
#mana-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4f7fe0, #a9c8ff); }

#selection { bottom: 128px; left: 50%; transform: translateX(-50%); padding: 5px 14px; font-size: 14px; }
#selection.shut { display: none; }
#selection { display: flex; gap: 6px; align-items: center; }
#selection button { padding: 1px 10px; font-size: 13px; }
#tools .finders { display: flex; flex-direction: column; gap: 4px; }
#tools .finders button { padding: 4px 10px; white-space: nowrap; }
button { font: inherit; color: var(--bone); background: #4a3220; border: 1px solid var(--edge);
  border-radius: 7px; padding: 6px 12px; cursor: pointer; }
button:hover { background: #5c3f28; }
button.on { background: var(--ochre); color: #2b1c0f; border-color: var(--bone); }

#spells { display: grid; grid-template-columns: repeat(9, auto); gap: 4px; }
#sandbox { display: flex; gap: 6px; }
#sandbox { display: none; }
body.sandbox #sandbox { display: flex; }
.spell { display: flex; flex-direction: column; align-items: center; padding: 2px 4px 3px; width: 66px; position: relative; overflow: hidden; }
.spell .icon { font-size: 17px; line-height: 1.15; }
.spell .name { font-size: 10px; white-space: nowrap; letter-spacing: -0.01em; }
.spell .dots b { font-size: 10px; color: #ffe28a; font-weight: normal; }
.spell.locked { opacity: 0.35; filter: grayscale(1); }
.spell.locked::after { content: '🔒'; position: absolute; right: 4px; top: 2px; font-size: 9px; }
.spell .key { position: absolute; top: 2px; left: 5px; font-size: 10px; opacity: 0.6; }
.spell .dots { position: absolute; top: 3px; right: 5px; display: flex; gap: 2px; }
.spell .dots i { width: 5px; height: 5px; border-radius: 50%; background: #a9c8ff; }
.spell.short { opacity: 0.55; }
.spell.short.on { opacity: 1; }

#flash { position: fixed; inset: 0; background: #e8f0ff; opacity: 0; pointer-events: none; }
#toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { background: var(--hide); border: 1px solid var(--edge); border-radius: 8px; padding: 4px 14px; font-size: 14px; transition: opacity 0.6s; }
.toast.going { opacity: 0; }

#build { left: 14px; bottom: 14px; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
#build button { display: flex; align-items: center; gap: 8px; text-align: left; padding: 4px 10px; white-space: nowrap; }
#build .icon { font-size: 18px; width: 22px; text-align: center; }
#build small { opacity: 0.7; margin-left: auto; padding-left: 8px; }

#building { right: 14px; bottom: 14px; padding: 10px 14px; min-width: 230px; max-width: 280px; }
#building.shut { display: none; }
#building h2 { margin: 0 0 4px; font-size: 18px; color: var(--ochre); font-weight: normal; }
#b-state { font-size: 13px; opacity: 0.85; margin-bottom: 6px; }
#b-train { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
#b-train.shut { display: none; }
#b-what { flex: 1; font-size: 14px; }
#b-train button { padding: 2px 10px; font-size: 16px; }
#b-queue { min-width: 20px; text-align: center; color: var(--ochre); }
#b-tip { font-size: 12px; opacity: 0.7; }

.toast.click { pointer-events: auto; cursor: pointer; border-color: #c8402f; }

#newgame, #outcome, #welcome { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5, 7, 13, 0.55); z-index: 3; }
#newgame.shut, #outcome.shut, #welcome.shut { display: none; }
#welcome .panel { position: static; padding: 22px 32px 24px; max-width: 560px; text-align: center; }
#welcome h2 { margin: 0 0 10px; font-size: 38px; color: var(--ochre); font-variant: small-caps; letter-spacing: 0.12em; font-weight: normal; }
#welcome p { margin: 0 0 12px; }
#welcome ul { text-align: left; margin: 0 0 18px; padding-left: 20px; font-size: 14px; }
#welcome li { margin: 5px 0; }
#welcome b { color: var(--ochre); font-weight: normal; }
#welcome b.blue { color: #8fb0ff; }
#welcome-go { font-size: 17px; padding: 8px 28px; }
.toast.hint { border-color: var(--ochre); background: rgba(70, 50, 26, 0.92); }
#outcome .panel { position: static; padding: 24px 34px; text-align: center; max-width: 440px; }
#outcome h2 { margin: 0 0 10px; font-size: 34px; color: var(--ochre); font-variant: small-caps; letter-spacing: 0.08em; font-weight: normal; }
#outcome p { margin: 0 0 18px; }
#outcome button { margin: 0 6px; font-size: 16px; padding: 8px 16px; }

#newgame .panel { position: static; padding: 20px 26px; min-width: 380px; }
#newgame h2 { margin: 0 0 14px; font-size: 26px; color: var(--ochre); font-variant: small-caps; letter-spacing: 0.08em; font-weight: normal; text-align: center; }
#newgame .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 10px 0; }
#newgame .row.end { justify-content: flex-end; margin-top: 18px; }
#newgame .pick { display: flex; gap: 4px; }
#newgame .pick button { min-width: 44px; }
#newgame input { accent-color: var(--ochre); }