/* The window look of the release game screen (ARC-DEC-060): grey bevelled windows, slots and bars. Every control keeps
   a 24 x 24 px target and a visible focus (WCAG 2.2 SC 2.5.8 and 2.4.7). */
.tb { font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif; font-size: 11px; color: #c0c0c0; }
.tb .hi { color: #f2f2f2; }
.tb .dim { color: #a8a8a8; }
.tb-win {
  background-color: #3c3c3c;
  background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), radial-gradient(rgba(0, 0, 0, .22) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  border: 1px solid #0b0b0b;
  box-shadow: inset 1px 1px 0 #8a8a8a, inset -1px -1px 0 #161616, inset 2px 2px 0 #5c5c5c, inset -2px -2px 0 #262626;
  padding: 3px;
  display: flex;
  flex-direction: column;
}
.tb-btn {
  appearance: none; font: inherit; color: #e4e4e4; background: #4c4c4c; border: 1px solid #101010;
  box-shadow: inset 1px 1px 0 #8c8c8c, inset -1px -1px 0 #272727; cursor: pointer;
  min-height: 24px; min-width: 24px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.tb-btn.icon { width: 26px; height: 26px; padding: 0; color: #e8d27a; }
.tb-btn:hover { background: #565656; }
.tb-btn[aria-disabled="true"] { color: #8a8a8a; cursor: default; }
.tb-slot { box-sizing: border-box; width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: #202020; border: 1px solid #0a0a0a; box-shadow: inset 1px 1px 0 #000, 0 0 0 1px #626262; }
.tb-gauge { position: relative; height: 14px; background: #1a1a1a; border: 1px solid #050505; box-shadow: 0 0 0 1px #5a5a5a; }
.tb-gauge > i { display: block; height: 100%; }
.tb-gauge > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: bold; text-shadow: 1px 1px 0 #000; }
.tb-gauge.hp > i { background: #c42a2a; box-shadow: inset 0 1px 0 #e86a6a, inset 0 -1px 0 #7a1414; }
.tb-gauge.mp > i { background: #2b55c4; box-shadow: inset 0 1px 0 #6a8ae8, inset 0 -1px 0 #142c7a; }
.tb-gauge.xp { height: 5px; }
.tb-gauge.xp > i { background: #e8d27a; }
.tb :focus-visible { outline: 1px dotted #f0f0f0; outline-offset: -4px; }
/* The character HUD. */
.release-hud { width: min(400px, 100%); gap: 6px; padding: 8px 10px; }
.tb-hud-head { display: flex; align-items: center; gap: 10px; }
.tb-portrait { position: relative; width: 38px; height: 38px; color: #cfcfcf; }
.tb-level { position: absolute; left: -3px; bottom: -4px; min-width: 16px; height: 14px; padding: 0 2px; display: grid; place-items: center; background: #4c4c4c; border: 1px solid #0a0a0a; box-shadow: inset 1px 1px 0 #8c8c8c; color: #fff; font-size: 10px; font-weight: bold; }
.tb-hud-name { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb-hud-name > h3 { margin: 0; font-size: 12px; font-weight: bold; }
.tb-hud-stat { display: inline-flex; align-items: center; gap: 4px; }
.tb-hud-buttons { display: flex; gap: 4px; }
.tb-hud-xp { display: flex; align-items: center; gap: 8px; }
.tb-hud-xp > .tb-gauge { flex: 1; }
.tb-xp-text, .tb-said { font-size: 10px; margin: 0; }
/* The Skills window. */
.tb-bar { display: flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 3px; background: #2c2c2c; border: 1px solid #111; box-shadow: inset 1px 1px 0 #616161, inset -1px -1px 0 #1c1c1c; }
.tb-bar > h2 { flex: 1; margin: 0; text-align: center; color: #ececec; font: bold 11px Verdana, Tahoma, sans-serif; letter-spacing: .4px; text-transform: none; }
.tb-skills-window { position: absolute; z-index: 20; width: min(300px, calc(100% - 32px)); max-height: 80vh; overflow: auto; }
.tb-skills { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; }
.tb-skills hr { width: 100%; border: 0; border-top: 1px solid #1b1b1b; box-shadow: 0 1px 0 #5b5b5b; margin: 6px 0; }
.tb-row-static { display: flex; justify-content: space-between; padding: 2px 0; }
.tb-skill { display: flex; flex-direction: column; gap: 3px; padding: 2px 0 4px; }
.tb-gauge.skill { height: 5px; }
.tb-gauge.skill > i { background: #2fa82f; }
.tb-skills .tb-gauge.xp > i { background: #c42a2a; }
/* The chat window: channel tabs, the sunk log and the line to type in. */
.tb-sunk { background: #232323; border: 1px solid #0d0d0d; box-shadow: inset 1px 1px 0 #080808, 0 0 0 1px #5a5a5a; }
.tb-tabs { display: flex; align-items: flex-end; gap: 2px; position: relative; z-index: 1; margin-bottom: -1px; }
.tb-tab { appearance: none; font: inherit; min-height: 24px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; color: #c8c8c8; background: #454545; border: 1px solid #101010; border-bottom: none; box-shadow: inset 1px 1px 0 #828282; cursor: pointer; }
.tb-tab[aria-selected="true"] { background: #232323; color: #fff; font-weight: bold; box-shadow: inset 1px 1px 0 #6a6a6a; }
.tb-dot { width: 5px; height: 5px; background: #40c040; border: 1px solid #0a0a0a; }
.tb-fill { flex: 1; }
.tb-chat { width: min(380px, 100%); padding: 6px 8px 8px; }
.tb-chat-body { display: flex; flex-direction: column; gap: 6px; }
.tb-chat-log { height: 180px; padding: 8px; display: flex; flex-direction: column; gap: 3px; line-height: 1.5; overflow: auto; }
.tb-chat-local { color: #ffff00; }
.tb-chat-general, .tb-chat-trade { color: #f0f0f0; }
.tb-chat-server { color: #f08080; }
.tb-chat-say { display: flex; padding: 5px 7px; }
.tb-chat-say input { font: inherit; color: #f0f0f0; background: transparent; border: none; outline: none; flex: 1; min-width: 0; min-height: 24px; }
.tb-chat-say input::placeholder { color: #9a9a9a; }
/* The Bot window (ARC-DEC-063): the Bot panel's dialog in the window look, its tabs, groups and rows. */
#release-thais-bot.tb-bot { width: min(900px, 100%); max-width: none; padding: 3px; gap: 8px; border: 1px solid #0b0b0b; background-color: #3c3c3c; }
.tb-bar > h3 { flex: 1; margin: 0; text-align: center; color: #ececec; font: bold 11px Verdana, Tahoma, sans-serif; letter-spacing: .4px; }
.tb-foot { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid #151515; box-shadow: inset 0 1px 0 #5c5c5c; }
.tb-foot > p { margin: 0; }
.tb-bot-head { margin: 0 10px; }
.tb-bot .tb-tabs { display: flex; align-items: flex-end; gap: 2px; padding-left: 6px; margin-bottom: -1px; }
.tb-bot .tb-tab { appearance: none; font: inherit; min-height: 24px; padding: 0 10px; color: #c8c8c8; background: #454545; border: 1px solid #101010; border-bottom: none; box-shadow: inset 1px 1px 0 #828282; cursor: pointer; }
.tb-bot .tb-tab[aria-selected="true"] { background: #2a2a2a; color: #fff; font-weight: bold; }
.tb-bot-panel { background: #2a2a2a; border: 1px solid #101010; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.tb-bot-editor { color-scheme: light; background: #f3e6c8; color: #1e1a14; }
.tb-grp { margin: 0; min-width: 0; border: 1px solid #1b1b1b; box-shadow: 1px 1px 0 #5b5b5b, inset 1px 1px 0 #5b5b5b; padding: 6px 10px 10px; }
.tb-grp > legend { padding: 0 5px; color: #f0f0f0; font-weight: bold; }
.tb-bot-rows { display: flex; flex-direction: column; padding: 3px; }
.tb-bot-row { display: grid; grid-template-columns: 70px minmax(0, 230px) 80px minmax(0, 1fr) 40px; align-items: center; gap: 12px; padding: 6px 8px; border-bottom: 1px solid #2e2e2e; }
.tb-bot-what { padding: 4px 6px; }
.tb-bot select { font: inherit; min-height: 24px; color: #f0f0f0; background: #232323; border: 1px solid #5a5a5a; }
.tb .warn { color: #e8a04a; }
.tb-bot-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.tb-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; text-align: center; background: #424242; border: 1px solid #121212; box-shadow: inset 1px 1px 0 #777, inset -1px -1px 0 #262626; }
.tb-bot-spell { display: grid; grid-template-columns: 24px 90px minmax(0, 1fr) 70px auto auto auto; align-items: center; gap: 8px; padding: 4px 6px; }
.tb .ok { color: #71dc71; }
/* The game container (ARC-DEC-067): it fills the browser window, the world canvas covers its game area at a whole scale,
   centred, and the area clips the overshoot (ARC-DEC-071), Thais's section lies over the world, letting a click outside its controls reach it, and the
   hunt's section is a column beside the area. Game only shows the world. */
.release-screen { position: relative; flex: none; height: 100vh; height: 100dvh; max-width: none; display: block; overflow: hidden; background: #000; container-type: size; }
.release-screen > section { position: absolute; inset: 0; margin: 0; padding: 8px; overflow: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.release-screen > section > * { position: relative; z-index: 1; pointer-events: auto; }
.release-screen #release-thais-stage { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; place-content: center; overflow: hidden; }
.release-screen #release-chat { position: absolute; left: 8px; bottom: 8px; }
.release-screen { --hunt-column: calc(28rem + 16px); }
.release-screen > #release-hunt { left: auto; box-sizing: border-box; width: var(--hunt-column); align-items: flex-end; }
.release-screen:not([data-game-only]):has(> #release-hunt:not([hidden])) > #release-thais > #release-thais-stage { right: var(--hunt-column); }
.release-screen .release-hunt-body { display: block; width: min(28rem, 100%); }
.release-screen[data-game-only] > section > :not(#release-thais-stage) { display: none; }
#release-screen-said { position: absolute; bottom: 8px; right: 8px; z-index: 30; margin: 0; padding: 4px 8px; background: #3c3c3c; }
/* The options menu (ARC-DEC-068) and its button stay over the world in game only; the language selector visits it. */
.tb-options-open { position: absolute; top: 8px; right: 8px; z-index: 30; }
.tb-options { position: absolute; top: 40px; right: 8px; z-index: 30; width: min(280px, calc(100% - 16px)); gap: 6px; padding-bottom: 8px; }
.tb-options > label { align-items: center; gap: 6px; justify-content: flex-start; padding: 0 8px; }
.tb-options .release-locale { padding: 0 8px; color: #c0c0c0; }
#release-locale-home { display: contents; }