/* Gothic forge: the game's look (black stone, bronze frames with red gem corners, sockets for the resources,
   a forge glow on what is open). Laid over the base styles in index.html; everything hangs on <body class="th-goth">,
   so another look can be added later as another class. The textures are SVG noise, drawn by the browser. */
body.th-goth .glass { backdrop-filter: none; -webkit-backdrop-filter: none }
body.th-goth .dockbtns { position: relative }
body.th-goth .hud { gap: 5px; padding: 9px 11px 10px }
body.th-goth .hudres { gap: 4px }
body.th-goth .chip { padding: 3px 6px 5px; column-gap: 4px }
body/* each resource sits in a socket */
.th-goth .chip .ic { width: 16px; height: 16px; margin: 5px 7px 5px 5px; border-radius: 50%; background: #120c08; box-shadow: 0 0 0 4px #120c08, 0 0 0 5px #8a6b3a, 0 0 0 6px #000, 0 0 8px 5px rgba(0,0,0,.6); grid-row: span 2 }
body.th-goth .dockbtns { padding: 5px 7px; gap: 4px }
body.th-goth .dockbtns button { padding: 5px 2px; gap: 1px }
body.th-goth .dockbtns .ic { width: 20px; height: 20px }
body.th-goth .pane { padding: 11px 12px 9px }
body.th-goth .bcard { padding: 8px 5px 6px; gap: 3px }
body.th-goth .dock { gap: 6px }
body.th-goth .goal { padding: 6px 10px }
body.th-goth button.quiet.small { padding: 4px 8px }

body.th-goth { --ink: #ecdcb8; --muted: #9c8a6c; --sun: #c8331a; --sun-ink: #f6d48a; --display: "Cinzel", serif; --body: "Alegreya Sans", sans-serif; --mono: "Alegreya Sans", sans-serif }
.th-goth .glass { color: #ecdcb8; border: 0; border-radius: 2px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2040'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20y1%3D'0'%20x2%3D'1'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23e9c98a'%2F%3E%3Cstop%20offset%3D'.4'%20stop-color%3D'%238a6531'%2F%3E%3Cstop%20offset%3D'.7'%20stop-color%3D'%233f2c14'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23b48a4a'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D'rotate(0%2020%2020)'%3E%3Cpath%20d%3D'M1%201h26l-5%204H6v16l-5%206z'%20fill%3D'url(%23g)'%20stroke%3D'%23000'%20stroke-width%3D'.8'%2F%3E%3Cpath%20d%3D'M8%208h10l-3%202H10v5l-2%203z'%20fill%3D'url(%23g)'%20stroke%3D'%23000'%20stroke-width%3D'.6'%2F%3E%3Cpath%20d%3D'M4%204l6%206'%20stroke%3D'%23000'%20stroke-width%3D'.8'%2F%3E%3Ccircle%20cx%3D'5'%20cy%3D'5'%20r%3D'3.4'%20fill%3D'%23b3170a'%20stroke%3D'%23000'%20stroke-width%3D'.8'%2F%3E%3Ccircle%20cx%3D'4'%20cy%3D'4'%20r%3D'1.1'%20fill%3D'%23ff9a7a'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left top / 34px 34px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2040'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20y1%3D'0'%20x2%3D'1'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23e9c98a'%2F%3E%3Cstop%20offset%3D'.4'%20stop-color%3D'%238a6531'%2F%3E%3Cstop%20offset%3D'.7'%20stop-color%3D'%233f2c14'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23b48a4a'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D'rotate(90%2020%2020)'%3E%3Cpath%20d%3D'M1%201h26l-5%204H6v16l-5%206z'%20fill%3D'url(%23g)'%20stroke%3D'%23000'%20stroke-width%3D'.8'%2F%3E%3Cpath%20d%3D'M8%208h10l-3%202H10v5l-2%203z'%20fill%3D'url(%23g)'%20stroke%3D'%23000'%20stroke-width%3D'.6'%2F%3E%3Cpath%20d%3D'M4%204l6%206'%20stroke%3D'%23000'%20stroke-width%3D'.8'%2F%3E%3Ccircle%20cx%3D'5'%20cy%3D'5'%20r%3D'3.4'%20fill%3D'%23b3170a'%20stroke%3D'%23000'%20stroke-width%3D'.8'%2F%3E%3Ccircle%20cx%3D'4'%20cy%3D'4'%20r%3D'1.1'%20fill%3D'%23ff9a7a'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right top / 34px 34px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2040'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20y1%3D'0'%20x2%3D'1'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23e9c98a'%2F%3E%3Cstop%20offset%3D'.4'%20stop-color%3D'%238a6531'%2F%3E%3Cstop%20offset%3D'.7'%20stop-color%3D'%233f2c14'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23b48a4a'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D'rotate(180%2020%2020)'%3E%3Cpath%20d%3D'M1%201h26l-5%204H6v16l-5%206z'%20fill%3D'url(%23g)'%20stroke%3D'%23000'%20stroke-width%3D'.8'%2F%3E%3Cpath%20d%3D'M8%208h10l-3%202H10v5l-2%203z'%20fill%3D'url(%23g)'%20stroke%3D'%23000'%20stroke-width%3D'.6'%2F%3E%3Cpath%20d%3D'M4%204l6%206'%20stroke%3D'%23000'%20stroke-width%3D'.8'%2F%3E%3Ccircle%20cx%3D'5'%20cy%3D'5'%20r%3D'3.4'%20fill%3D'%23b3170a'%20stroke%3D'%23000'%20stroke-width%3D'.8'%2F%3E%3Ccircle%20cx%3D'4'%20cy%3D'4'%20r%3D'1.1'%20fill%3D'%23ff9a7a'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right bottom / 34px 34px no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2040'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20y1%3D'0'%20x2%3D'1'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23e9c98a'%2F%3E%3Cstop%20offset%3D'.4'%20stop-color%3D'%238a6531'%2F%3E%3Cstop%20offset%3D'.7'%20stop-color%3D'%233f2c14'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23b48a4a'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D'rotate(270%2020%2020)'%3E%3Cpath%20d%3D'M1%201h26l-5%204H6v16l-5%206z'%20fill%3D'url(%23g)'%20stroke%3D'%23000'%20stroke-width%3D'.8'%2F%3E%3Cpath%20d%3D'M8%208h10l-3%202H10v5l-2%203z'%20fill%3D'url(%23g)'%20stroke%3D'%23000'%20stroke-width%3D'.6'%2F%3E%3Cpath%20d%3D'M4%204l6%206'%20stroke%3D'%23000'%20stroke-width%3D'.8'%2F%3E%3Ccircle%20cx%3D'5'%20cy%3D'5'%20r%3D'3.4'%20fill%3D'%23b3170a'%20stroke%3D'%23000'%20stroke-width%3D'.8'%2F%3E%3Ccircle%20cx%3D'4'%20cy%3D'4'%20r%3D'1.1'%20fill%3D'%23ff9a7a'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left bottom / 34px 34px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'320'%20height%3D'320'%3E%3Cfilter%20id%3D'f'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.035%200.035'%20numOctaves%3D'5'%20seed%3D'8'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201.7%200%200%200%20-0.55'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'%231b1614'%2F%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23f)'%2F%3E%3C%2Fsvg%3E") 0 0 / 320px 320px;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px #5c4a2e, 0 0 0 4px #000, inset 0 0 0 1px #8a6b3a, inset 0 0 0 2px #000, inset 0 0 34px rgba(0,0,0,.95), inset 0 -20px 50px rgba(130,14,0,.22), 0 12px 28px rgba(0,0,0,.75) }
.th-goth .hud { padding: 11px 14px 12px }
.th-goth .pane, .th-goth .dockbtns, .th-goth .goal { padding-left: 14px; padding-right: 14px }
.th-goth .hud .name { color: #e2c27e; font-weight: 700; font-size: 22px; letter-spacing: .05em; text-shadow: 0 1px 0 #000, 0 0 12px rgba(220,60,10,.35) }
.th-goth .hud .tier { background: linear-gradient(#7a140a, #3a0602); color: #f6d48a; border-radius: 0; padding: 2px 10px; font: 700 10px "Cinzel", serif; letter-spacing: .14em; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); box-shadow: inset 0 0 0 1px #c08a3a }
.th-goth .chip { background: rgba(0,0,0,.6); border-radius: 2px; box-shadow: inset 0 2px 6px #000, 0 0 0 1px #3a2c18; grid-template-columns: auto minmax(0,1fr) }
.th-goth .chip b { font: 700 15px "Alegreya Sans SC", sans-serif; color: #f3e3c0; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000 }
.th-goth .chip small { grid-column: 2; font-family: "Alegreya Sans", sans-serif; color: #9c8a6c }
.th-goth .hudmore { font-family: "Alegreya Sans", sans-serif; color: #9c8a6c }
.th-goth .chip .cap { height: 2px; background: linear-gradient(90deg, #7a140a, #ff5a2a); opacity: 1; box-shadow: 0 0 6px #ff4a1a }
.th-goth button.quiet { background: radial-gradient(circle at 40% 30%, #2e2620, #0b0807); color: #e2c27e; border: 0; border-radius: 2px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6b3a, 0 0 0 3px #000 }
.th-goth button.primary, .th-goth button.mini.primary { background: linear-gradient(#9a1d0c, #4a0804); color: #f6d48a; border-radius: 2px; border: 0; box-shadow: 0 0 0 1px #000, 0 0 0 2px #c08a3a, 0 0 0 3px #000, 0 0 14px rgba(255,70,20,.35); font: 700 13.5px "Cinzel", serif; letter-spacing: .06em; text-shadow: 0 1px 0 #000 }
.th-goth .dockbtns button { color: #b9a37a; font: 700 10.5px "Cinzel", serif; letter-spacing: .08em; border-radius: 2px }
.th-goth .dockbtns .ic { color: #b9a37a }
.th-goth .dockbtns button.on { background: radial-gradient(ellipse at 50% 100%, rgba(255,80,20,.35), transparent 70%); color: #ffd58a }
.th-goth .dockbtns button.on .ic { color: #ffcf80; filter: drop-shadow(0 0 4px #ff5a1a) }
.th-goth .dockbtns button.on::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #ff6a2a, transparent) }
.th-goth .pane h3, .th-goth .pane h4 { color: #e2c27e; font-weight: 700; text-shadow: 0 1px 0 #000; letter-spacing: .04em }
.th-goth .pane h3 { font-size: 20px }
.th-goth .pane p, .th-goth .today li { color: #d8c8a6 }
.th-goth .pane .x { background: #0b0807; color: #e2c27e; border-radius: 2px; box-shadow: 0 0 0 1px #8a6b3a; top: 10px; right: 10px }
.th-goth .bcard { background: radial-gradient(circle at 50% 40%, #241c16, #0a0807 80%); color: #e8d6b0; border-radius: 2px; box-shadow: inset 0 0 0 1px #5c4a2e, inset 0 0 0 2px #000, inset 0 0 16px #000; font: 700 12px "Alegreya Sans SC", sans-serif; letter-spacing: .02em }
.th-goth .bcard .ic { color: #e2c27e } .th-goth .bcard em, .th-goth .bcard .key, .th-goth .bcard .soon { color: #9c8a6c }
.th-goth .bcard.on { box-shadow: inset 0 0 0 1px #ff6a2a, inset 0 0 18px rgba(255,70,20,.4), 0 0 10px rgba(255,70,20,.5) }
.th-goth .goal, .th-goth .armies .way { color: #ecdcb8 } .th-goth .goal .ic { color: #ff7a3a }
.th-goth button.mini, .th-goth button.wpm { background: #0f0b09; color: #ecdcb8; border-radius: 2px; box-shadow: inset 0 0 0 1px #5c4a2e }
.th-goth .pbar { background: #050302; border-radius: 0; box-shadow: 0 0 0 1px #5c4a2e } .th-goth .pbar i { background: linear-gradient(#ff5a2a, #8a0f04); box-shadow: 0 0 8px #ff3a0a }
.th-goth .chips span { background: #0f0b09; border-radius: 2px; box-shadow: inset 0 0 0 1px #3a2c18 }
/* the panels' own controls: choices, segments, deals, toggles, sub-cards */
.th-goth .pick button, .th-goth .seg button { background: #0f0b09; color: #ecdcb8; border: 0; border-radius: 2px; box-shadow: inset 0 0 0 1px #5c4a2e, inset 0 0 10px #000 }
.th-goth .pick button.on, .th-goth .seg button.on { background: radial-gradient(ellipse at 50% 100%, rgba(255,80,20,.3), #1a0d08 75%); color: #ffd58a; box-shadow: inset 0 0 0 1px #ff6a2a, 0 0 8px rgba(255,70,20,.4) }
.th-goth .seg { border-radius: 2px; gap: 3px }
.th-goth .deal { border-radius: 2px }
.th-goth .deal:not(.primary) { background: #0f0b09; color: #ecdcb8; box-shadow: inset 0 0 0 1px #5c4a2e }
.th-goth button.wtog { border-radius: 2px; background: #0f0b09; box-shadow: inset 0 0 0 1px #5c4a2e } .th-goth button.wtog i { border-radius: 1px; background: #e2c27e }
.th-goth button.wtog.on { background: linear-gradient(#9a1d0c, #4a0804) }
/* the account sheet: log in, sign up */
.th-goth .acct h2 { color: #e2c27e; font-weight: 700; letter-spacing: .04em; text-shadow: 0 1px 0 #000, 0 0 12px rgba(220,60,10,.35) }
.th-goth .acct .x { background: #0b0807; color: #e2c27e; border-radius: 2px; box-shadow: 0 0 0 1px #8a6b3a }
.th-goth .af span { color: #b9a37a; letter-spacing: .02em }
.th-goth .af input { background: #0a0705; color: #f3e3c0; border: 0; border-radius: 2px; box-shadow: inset 0 2px 6px #000, inset 0 0 0 1px #5c4a2e }
.th-goth .af input:focus { box-shadow: inset 0 2px 6px #000, inset 0 0 0 1px #ff6a2a, 0 0 8px rgba(255,70,20,.4) }
.th-goth .af.bad input { box-shadow: inset 0 2px 6px #000, inset 0 0 0 1px #ff8f7a }
.th-goth .acct button.link { color: #e2c27e }
.th-goth .newhere::before, .th-goth .newhere::after { height: 1px; background: linear-gradient(90deg, transparent, #8a6b3a, transparent) }
.th-goth button.wide.big { font: 700 15px "Cinzel", serif; letter-spacing: .06em }
/* a phone (max 2026-10-23: "text and other sizes still look too big, so much space is used"): the big type, buttons
   and paddings come down a step so the bottom panel and the globe's card leave the land in view; what is already
   small (12.5px and under) stays as it is */
@media (max-width: 640px) {
  body.th-goth .pane { max-height: min(40vh, 340px); padding: 8px 10px 7px; font-size: 13px; line-height: 1.4 }
  body.th-goth .pane p { margin: 3px 0 6px }
  body.th-goth .pane h3 { font-size: 17px; margin-bottom: 4px }
  body.th-goth .pane h4 { font-size: 15px; margin: 10px 0 4px }
  body.th-goth .pane .x { top: 6px; right: 6px; padding: 4px }
  body.th-goth .selhead { gap: 8px; margin-bottom: 5px; padding-right: 30px }
  body.th-goth .selhead b { font-size: 17px }
  body.th-goth .selhead .ava { width: 32px; height: 32px; font-size: 14px }
  body.th-goth button:is(.quiet, .primary):not(.small, .mini, .sq, .wide, .wpm, .wtog) { font-size: 13px; padding: 7px 12px }
  body.th-goth button.mini { padding: 5px 9px }
  body.th-goth .row { gap: 6px }
  body.th-goth .row.left { margin-top: 6px }
  body.th-goth .seg button { padding: 5px 10px }
  body.th-goth .pick { gap: 4px }
  body.th-goth .pick button { min-height: 34px }
  body.th-goth .pick .rc, body.th-goth .pick.amts button { font-size: 13px }
  body.th-goth .pick.surplus button { min-height: 30px }
  body.th-goth .deal b { font-size: 14px }
  body.th-goth .list li { padding: 5px 0; font-size: 13px }
  body.th-goth .work, body.th-goth .army { padding: 8px; margin-bottom: 8px }
  body.th-goth .workhead { margin-bottom: 6px } body.th-goth .workhead b { font-size: 15px }
  body.th-goth .wrow .wname { font-size: 13px }
  body.th-goth .piece ul { font-size: 13px }
  body.th-goth .dock { gap: 5px }
  body.th-goth .dock.building .bcard { flex-basis: 90px }
  body.th-goth .dockbtns { padding: 4px 7px }
  body.th-goth .dockbtns button { padding: 4px 2px }
  body.th-goth .dockbtns .ic { width: 18px; height: 18px }
  /* the globe's card: a place, its sky, what it is, one button */
  body.th-goth .card { padding: 11px 13px; gap: 6px; width: calc(100% - 16px); bottom: calc(8px + env(safe-area-inset-bottom, 0px)) }
  body.th-goth .card h2 { font-size: 20px }
  body.th-goth .card p { font-size: 13.5px }
  body.th-goth .card .coords { font-size: 12.5px }
  body.th-goth .card .sunline { margin-top: -3px } body.th-goth .card .wxline { margin-top: -4px }
  body.th-goth .warcard { padding: 10px 12px; width: calc(100% - 16px); bottom: calc(8px + env(safe-area-inset-bottom, 0px)) }
}
/* Arabic and Hindi faces stand much taller than their letters: a line that takes the font's own height ("normal",
   as every font shorthand sets it) made buttons and headings twice as tall as in English */
html[lang="ar"] :is(button, h2, h3, h4, .selhead b, .bcard, .dockbtns button), html[lang="hi"] :is(button, h2, h3, h4, .selhead b, .bcard, .dockbtns button) { line-height: 1.35 }
/* the place's latitude and longitude read left to right inside a right-to-left card */
html[dir="rtl"] .card .coords { direction: ltr; text-align: right }