/* skin.css (2026-10-16): the painted interface over style.css — dark wood behind everything, windows in a wood-and-iron
   frame with a crimson banner for the title, parchment inside, bronze and parchment buttons, parchment and leather tabs,
   item cards with a wooden name strip. Every picture is in img/ui/skin (cut from img/General_UI); the frames are drawn
   nine ways (border-image), so their corners keep their size and the sides stretch to fit. Remove the <link> in
   index.html and the game is back to its drawn look. */
:root {
  --sk-wood: url(img/ui/skin/wood.webp);
  --sk-parch: url(img/ui/skin/parchment.webp);
  --sk-ink: #3a2410;
  --sk-cream: #fff2d0;
  --sk-gilt: #f2d58a;
}

/* ---- the game's frame: dark wood round the view and behind the right column */
.frame { padding: 0 10px; background: #2a180a var(--sk-wood) 0 0 / 420px; }
.left { border-right: 10px solid transparent; border-image: none; }
.view { box-shadow: 0 0 0 2px #1a0e05; }
.right { background: none; }

/* ---- the top bar: a riveted wooden beam; the three big tabs wooden plaques, the open one crimson */
.topbar { height: 46px; border-bottom: 0; background: #2a180a url(img/ui/skin/topbar.webp) 0 50% / auto 100% repeat-x; }
.tabs.big button { height: 36px; padding: 0 12px 0 4px; color: var(--sk-gilt); text-shadow: 0 1px 2px #000; background: none; border-radius: 0; box-shadow: none;
  border-style: solid; border-width: 8px 22px; border-image: url(img/ui/skin/plaque-wood.webp) 20 70 fill / 8px 22px stretch; }
.tabs.big button.on { color: var(--sk-cream); border-width: 7px 14px; border-image: url(img/ui/skin/btn-red.webp) 20 36 fill / 7px 14px stretch; }

/* ---- buttons: bronze, the secondary ones parchment (the round medallions, the close cross, the city slots and the like
   keep their own looks) */
button:where(:not(.round, .win-close, .arrow, .ticon, .plus, .ov-face, .move-btn, .login-face, .fp-face, .chan, .lordbtn)) {
  padding: 2px 8px; color: #2a1606; text-shadow: 0 1px 0 rgba(255,236,190,.45); background: none; border-radius: 0; box-shadow: none;
  border-style: solid; border-color: transparent; border-width: 6px 11px; border-image: url(img/ui/skin/btn-bronze.webp) 20 36 fill / 6px 11px stretch; }
button.secondary:where(:not(.round, .win-close, .arrow, .ticon, .plus, .ov-face, .move-btn, .login-face, .fp-face, .chan, .lordbtn)) {
  color: var(--sk-ink); text-shadow: none; background: none; border-image-source: url(img/ui/skin/btn-parch.webp); }
button.small:where(:not(.round, .win-close, .arrow, .ticon, .plus, .ov-face, .move-btn, .login-face, .fp-face, .chan, .lordbtn)) {
  padding: 0 5px; border-width: 5px 9px; border-image-width: 5px 9px; }
button:where(:not(.round, .win-close, .arrow, .ticon, .plus)):active:not(:disabled) { filter: brightness(.92); transform: translateY(1px); }

/* ---- tabs: the open one parchment with a gilt rim, the others dark leather */
.win .tabs.small, .wtabs { gap: 2px; border-bottom: 2px solid #8a5d22; }
.win .tabs.small button, .wtabs button, .tabs.small button, .jobtabs button, .ctabs button {
  padding: 0 6px; color: #f3e2bc; text-shadow: 0 1px 1px #000; background: none; border-radius: 0; box-shadow: none;
  border-style: solid; border-color: transparent; border-width: 9px 12px 6px; border-image: url(img/ui/skin/tab-off.webp) 40 50 30 50 fill / 9px 12px 6px stretch; }
.win .tabs.small button.on, .wtabs button.on, .tabs.small button.on, .jobtabs button.on, .ctabs button.on {
  color: #4a2a0c; text-shadow: 0 1px 0 rgba(255,240,200,.6); border-image-source: url(img/ui/skin/tab-on.webp); }
.wtabs .act button { border-width: 5px 9px; border-image: url(img/ui/skin/btn-bronze.webp) 20 36 fill / 5px 9px stretch; }

/* ---- windows: the wood-and-iron frame round a parchment, the title on a crimson banner hung from the top beam */
.win, .pop { padding: 0 6px 8px; border-radius: 0; box-shadow: 0 16px 40px rgba(0,0,0,.65);
  border-style: solid; border-color: transparent; border-width: 12px; border-image: url(img/ui/skin/window.webp) 92 72 82 72 / 37px 29px 33px 29px stretch;
  background: #e9d3a2 var(--sk-parch) 0 0 / 360px padding-box; }
.win-bar { height: 46px; margin: -12px 0 2px; background: none; border-bottom: 0; grid-template-columns: 1fr auto 1fr 34px; }
.bricks { background: none; }
.win-title { height: 46px; padding: 7px 14px 0; line-height: 24px; font-size: 17px; letter-spacing: .5px; color: var(--sk-cream); text-shadow: 0 1px 2px #2a0604;
  border-style: solid; border-width: 0 40px; border-image: url(img/ui/skin/plaque.webp) 0 100 fill / 0 40px stretch; }
.win-close { align-self: start; justify-self: center; margin-top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; color: var(--sk-gilt); background: radial-gradient(circle at 40% 35%, #6a5e52, #2a2420 70%); border: 2px solid #c9953e;
  box-shadow: 0 0 0 1px #2a180a, 0 2px 4px rgba(0,0,0,.6); }
.win-close:hover { color: #fff; background: radial-gradient(circle at 40% 35%, #a8432c, #5a160c 70%); }
.win-body, .pop-body { margin: 2px 8px 0; background: rgba(255,250,236,.38); border: 1px solid rgba(138,93,34,.45); border-radius: 2px;
  box-shadow: inset 0 0 12px rgba(122,74,28,.18); }
.win.side { border-image-width: 30px 23px 26px 23px; }
.win.side .win-bar { height: 40px; grid-template-columns: 1fr auto 1fr 30px; }
.win.side .win-title { height: 40px; padding-top: 6px; line-height: 20px; border-width: 0 34px; border-image-width: 0 34px; }
.win.side .win-close { width: 22px; height: 22px; margin-top: 9px; font-size: 12px; }
/* a heading: a gilt rule under it with a lily in the middle */
.win h4, .pop h4 { border-bottom: 0; padding-bottom: 9px;
  background: url(img/ui/skin/divider.webp) 50% 100% / auto 11px no-repeat,
    linear-gradient(90deg, transparent, #b8893c 12%, #b8893c 88%, transparent) 50% calc(100% - 5px) / 100% 1px no-repeat; }
.win table.rep th { color: var(--sk-gilt); text-shadow: 0 1px 1px #000; background: #4a2c14 var(--sk-wood) 0 0 / 300px; border-bottom: 1px solid #2a180a; }
.card { background: rgba(255,250,236,.5); border-color: rgba(160,122,62,.55); }

/* ---- item cards: parchment in a small iron-cornered frame, the name on its wooden strip */
.igrid { gap: 10px; }
.icard { position: relative; padding: 4px 10px 12px; background: none; border-style: solid; border-color: transparent; border-width: 0;
  border-image: url(img/ui/skin/card.webp) 120 70 70 70 fill / 36px 21px 21px 21px stretch; }
.icard .ih { height: 22px; margin: 0 6px; padding: 0 4px; line-height: 22px; color: var(--sk-gilt); text-shadow: 0 1px 2px #000; background: none; border-bottom: 0; }
.icard .ib { padding: 10px 2px 0; }
.icard button.wide { width: calc(100% - 4px); margin: 8px 2px 0; }
.gtile { background: rgba(255,250,236,.55); border-color: rgba(160,122,62,.6); }

/* ---- the right column: the lord's box and the city panel framed on the wood */
.lord { border-bottom: 0; padding: 8px 8px 4px; }
.lord .face { padding: 5px; border-style: solid; border-width: 0; border-image: url(img/ui/skin/inset.webp) 40 fill / 7px stretch; }
.lord .face img.face-img { border: 0; }
.scroll { background: none; border: 0; border-style: solid; border-width: 10px; border-image: url(img/ui/skin/sidepanel.webp) 95 90 fill / 19px 18px stretch; }
.lordbtn { padding: 0 4px; color: var(--sk-ink); background: none; border-radius: 0; box-shadow: none;
  border-style: solid; border-color: transparent; border-width: 4px 8px; border-image: url(img/ui/skin/btn-parch.webp) 20 36 fill / 4px 8px stretch; }
.citybox { padding: 0 8px 8px 6px; gap: 4px; }
.city-list { background: rgba(10,6,2,.35); border-right: 0; border-radius: 3px; box-shadow: inset 0 0 6px rgba(0,0,0,.6); }
.city-list button { border-image: none; }
.city-main { padding: 8px 10px; border-style: solid; border-color: transparent; border-width: 12px 10px;
  border-image: url(img/ui/skin/sidepanel.webp) 95 90 fill / 19px 18px stretch; }
.ctab { background: rgba(255,250,236,.4); border: 1px solid rgba(138,93,34,.5); border-top: 0; }

/* ---- the bottom: the round buttons on the wood, their names on leather tags; the chat on parchment in a frame */
.bottom { border-top: 3px solid #1a0e05; box-shadow: inset 0 1px 0 #c9953e; background: none; }
.round .lbl { padding: 0 3px; color: var(--sk-gilt); text-shadow: 0 1px 1px #000; background: none; border-radius: 0;
  border-style: solid; border-color: transparent; border-width: 4px 7px; border-image: url(img/ui/skin/tooltip.webp) 24 26 fill / 4px 7px stretch; }
.chatbox { border-radius: 0; border-style: solid; border-color: transparent; border-width: 10px;
  border-image: url(img/ui/skin/window.webp) 92 72 82 72 / 28px 22px 25px 22px stretch; background: #e9d3a2 var(--sk-parch) 0 0 / 360px padding-box; }

/* ---- tips and notices on a leather plate */
.toast, .map-hover { color: var(--sk-gilt); background: none; border-radius: 0; border-style: solid; border-color: transparent; border-width: 7px 12px;
  border-image: url(img/ui/skin/tooltip.webp) 24 26 fill / 7px 12px stretch; text-shadow: 0 1px 1px #000; }

/* ---- scrollbars: a wooden rod with a brass grip */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { border-style: solid; border-width: 10px 0; border-image: url(img/ui/skin/scroll-track.webp) 30 0 fill / 10px 0 stretch; }
::-webkit-scrollbar-thumb { border-style: solid; border-width: 8px 0; border-image: url(img/ui/skin/scroll-thumb.webp) 28 0 fill / 8px 0 stretch; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---- the white boxes inside windows: a lighter wash of the same parchment */
.qfams, .qlist, .bhead .desc { background: rgba(255,250,236,.6); border-color: rgba(160,122,62,.55); }
.qf.on { background: rgba(242,220,171,.8); }